indicator-ui 0.0.1

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

@@ -0,0 +1,29 @@
+@use '../../../../../styles' as *;
+
+@mixin tabActiveButton {
+  border-radius: 6px;
+  background-color: $base-white;
+  box-shadow: 0 1px 2px 0 #1018280D;
+
+  .icon {
+    @include modify-svg($stroke: $gray-700);
+  }
+
+  .text {
+    color: $gray-700;
+  }
+
+  &:hover {
+    .icon {
+      @include modify-svg($stroke: $gray-900);
+    }
+
+    .text {
+      color: $gray-900;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,31 @@
+@use '../../../../../styles' as *;
+
+@mixin tabButton {
+  border-radius: 6px;
+  background-color: $gray-100;
+  box-shadow: 0 1px 2px 0 #1018280D;
+
+  .icon {
+    @include modify-svg($stroke: $gray-500);
+  }
+
+  .text {
+    color: $gray-500;
+  }
+
+  &:hover {
+    background-color: $gray-200;
+
+    .icon {
+      @include modify-svg($stroke: $gray-800);
+    }
+
+    .text {
+      color: $gray-800;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,25 @@
+@use '../../../../../styles' as *;
+
+@mixin tertiaryColorButton {
+  .icon {
+    @include modify-svg($stroke: $blue-dark-500);
+  }
+
+  .text {
+    color: $blue-dark-500;
+  }
+
+  &:hover {
+    .text {
+      color: $blue-dark-700;
+    }
+
+    .icon {
+      @include modify-svg($stroke: $blue-dark-700);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,25 @@
+@use '../../../../../styles' as *;
+
+@mixin tertiaryGrayButton {
+  .icon {
+    @include modify-svg($stroke: $gray-700);
+  }
+
+  .text {
+    color: $gray-700;
+  }
+
+  &:hover {
+    .text {
+      color: $gray-900;
+    }
+
+    .icon {
+      @include modify-svg($stroke: $gray-900);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,25 @@
+@use '../../../../../styles' as *;
+
+@mixin tertiaryWhiteButton {
+  .icon {
+    @include modify-svg($stroke: $blue-dark-100);
+  }
+
+  .text {
+    color: $blue-dark-100;
+  }
+
+  &:hover {
+    .text {
+      color: $base-white;
+    }
+
+    .icon {
+      @include modify-svg($stroke: $base-white);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,20 @@
+@use '../../../../../styles' as *;
+
+@mixin ultraButton {
+  padding: 18px;
+
+  .icon {
+    @include modify-svg() {
+      & {
+        flex: none;
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  .text {
+    padding: 0 12px;
+    @include fnt-flex($size: 18, $line-height: 24, $weight: 500);
+  }
+}

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

@@ -0,0 +1,19 @@
+@use '../../../../../styles' as *;
+
+@mixin warningPrimaryButton {
+  border-radius: 8px;
+  background-color: $error-500;
+  box-shadow: 0 1px 2px 0 #1018280D;
+
+  &:hover {
+    background-color: $error-600;
+  }
+
+  &:focus {
+    background-color: $error-500;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+  }
+}

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

@@ -0,0 +1,26 @@
+@use '../../../../../styles' as *;
+
+@mixin warningSecondaryColorButton {
+  box-shadow: 0 1px 2px 0 #1018280D, 0 0 0 1px $error-200;
+
+  .icon {
+    @include modify-svg($stroke: $error-500);
+  }
+
+  .text {
+    color: $error-500;
+  }
+
+  &:hover {
+    background-color: $error-50;
+    box-shadow: 0 1px 2px 0 #1018280D, 0 0 0 1px $error-400;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 4px $gray-100, 0 1px 2px 0 #1018280D, 0 0 0 1px $error-200;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

package/dist/scss/ui/InputFields/FlexField/index.scss

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

package/dist/scss/ui/InputFields/FlexField/styles/mixins/flexField.scss

@@ -0,0 +1,70 @@
+@use '../../../../../styles' as *;
+
+@mixin insertFlexField() {
+  .flexField {
+    width: 100%;
+    height: fit-content;
+
+    @include centerInsideContent();
+
+    padding: 10px 12px;
+    border-radius: 8px;
+    gap: 12px;
+    background-color: $base-white;
+    box-shadow: 0 0 0 1px $gray-300, 0 1px 2px 0 #1018280D;
+    box-sizing: border-box;
+
+    .inputField {
+      flex: 1;
+      min-width: 0; // Важное свойство, чтобы flexbox учитывал минимальное сжатие
+
+      min-height: 24px;
+      outline: none;
+      padding: 0;
+      margin: 0;
+      border: none;
+      background: none;
+      text-wrap: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-900);
+
+      &::placeholder {
+        @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-400);
+      }
+    }
+
+    &.pointer {
+      cursor: pointer;
+    }
+
+    &.focus {
+      box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 #1018280D;
+    }
+
+
+    &.isError {
+      box-shadow: 0 0 0 1px $error-300, 0 1px 2px 0 #1018280D;
+
+      &.focus {
+        box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 #1018280D;
+      }
+    }
+
+    &.disabled {
+      background-color: $gray-100;
+      cursor: default;
+
+      * {
+        cursor: default;
+      }
+
+      .inputField {
+        @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-500);
+      }
+    }
+
+    @content;
+  }
+}

package/dist/scss/ui/InputFields/FlexField/styles/mixins/index.scss

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

package/dist/scss/ui/InputFields/InputField/index.scss

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

package/dist/scss/ui/InputFields/InputField/styles/mixins/index.scss

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

package/dist/scss/ui/InputFields/InputField/styles/mixins/inputField.scss

@@ -0,0 +1,17 @@
+@use '../../../FlexField';
+@use '../../../InputFieldWrapper';
+@use '../../../SelectField';
+@use '../../../SwitcherField';
+@use '../../../RadioField';
+@use '../../../TextareaField';
+
+@mixin insertInputField() {
+  @include FlexField.insertFlexField();
+  @include InputFieldWrapper.insertInputFieldWrapper() {
+    @content;
+  }
+  @include SelectField.insertSelectField();
+  @include SwitcherField.insertSwitcherField();
+  @include RadioField.insertRadioField();
+  @include TextareaField.insertTextareaField();
+}

package/dist/scss/ui/InputFields/InputFieldWrapper/index.scss

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

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

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

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

@@ -0,0 +1,50 @@
+@use '../../../../../styles' as *;
+
+@mixin insertInputFieldWrapper() {
+  .inputFieldWrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    gap: 4px;
+
+    .labelText {
+      display: flex;
+      padding: 0 12px;
+      gap: 2px;
+
+      @include fnt($size: 14, $line-height: 20, $weight: 500, $color: $gray-700);
+
+      .required {
+        @include fnt($size: 14, $line-height: 20, $weight: 500, $color: $error-500);
+      }
+    }
+
+    .hintText {
+      display: flex;
+      padding: 0 12px;
+      gap: 2px;
+
+      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: $gray-600);
+    }
+
+    .hintError {
+      display: flex;
+      padding: 0 12px;
+      gap: 2px;
+
+      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: $error-500);
+    }
+
+    .helperLink {
+      display: flex;
+      padding: 0 12px;
+      gap: 2px;
+      cursor: pointer;
+      @include changeSvg($width: 20, $height: 20, $stroke: $blue-dark-500, $flex: none);
+      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: $blue-dark-500);
+    }
+
+    @content;
+  }
+}

package/dist/scss/ui/InputFields/RadioField/index.scss

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

package/dist/scss/ui/InputFields/RadioField/styles/mixins/index.scss

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

package/dist/scss/ui/InputFields/RadioField/styles/mixins/radioField.scss

@@ -0,0 +1,45 @@
+@use '../../../../../styles' as *;
+@use '../../../FlexField';
+
+@mixin insertRadioField() {
+  .radioFieldItem {
+    width: fit-content;
+    height: fit-content;
+
+    display: flex;
+    gap: 8px;
+
+    .checkbox {
+      flex: none;
+      width: 16px;
+      height: 16px;
+
+      border-radius: 50%;
+      border: 1px solid $gray-300;
+      background-color: $base-white;
+
+      @include centerInsideContent();
+    }
+
+    .label {
+      @include fnt($size: 14, $line-height: 20, $weight: 500, $color: $gray-700);
+    }
+
+    &.active {
+      .checkbox {
+        &:after {
+          content: '';
+          flex: none;
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background-color: $blue-dark-500;
+        }
+
+        border: 1px solid $blue-dark-500;
+      }
+    }
+
+    @content;
+  }
+}

package/dist/scss/ui/InputFields/SelectField/index.scss

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

package/dist/scss/ui/InputFields/SelectField/styles/mixins/index.scss

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

package/dist/scss/ui/InputFields/SelectField/styles/mixins/selectField.scss

@@ -0,0 +1,58 @@
+@use '../../../../../styles' as *;
+@use '../../../FlexField';
+
+@mixin insertSelectField() {
+  .selectField {
+    width: 100%;
+    position: relative;
+
+    @include FlexField.insertFlexField();
+
+    .modalWindow {
+      width: 100%;
+      position: absolute;
+      z-index: 5;
+
+      .selectModalWindow {
+        width: 100%;
+        height: fit-content;
+        max-height: 300px;
+
+        display: flex;
+        flex-direction: column;
+
+        border-radius: 8px;
+        padding: 4px;
+
+        background-color: $base-white;
+        box-shadow: 0 0 0 1px $gray-300, 0 4px 6px -2px #10182808, 0px 12px 16px -4px #10182814;
+
+        overflow: scroll;
+        scrollbar-width: none;
+
+        .selectFieldOptionsItem {
+          width: 100%;
+          height: fit-content;
+
+          @include centerInsideContent();
+
+          gap: 8px;
+          padding: 10px 16px;
+
+          .label {
+            flex: 1;
+            text-align: left;
+            @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-900);
+          }
+
+          &.active {
+            background-color: $blue-dark-50;
+            @include changeSvg($width: 20, $height: 20, $stroke: $blue-dark-500, $flex: none);
+          }
+        }
+      }
+    }
+
+    @content;
+  }
+}

package/dist/scss/ui/InputFields/SwitcherField/index.scss

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

package/dist/scss/ui/InputFields/SwitcherField/styles/mixins/index.scss

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

package/dist/scss/ui/InputFields/SwitcherField/styles/mixins/switcherField.scss

@@ -0,0 +1,92 @@
+@use '../../../../../styles' as *;
+@use "sass:meta";
+@use "sass:string";
+@use "sass:map";
+
+$medium-size: 'medium';
+$large-size: 'large';
+
+$light-tone: 'light';
+$dark-tone: 'dark';
+
+
+$size-config: (
+        medium: (
+                width: 36,
+                height: 20,
+                radius: 16,
+        ),
+        large: (
+                width: 44,
+                height: 24,
+                radius: 20,
+        ),
+);
+
+$tone-config: (
+        light: (
+                main: $gray-200,
+                hover: $gray-300,
+        ),
+        dark: (
+                main: $gray-300,
+                hover: $gray-400,
+        ),
+);
+
+@mixin insertSwitcherField($size: $medium-size, $tone: $light-tone) {
+  $size: if(meta.type-of($size) == 'string', string.unquote($size), $size);
+  $tone: if(meta.type-of($tone) == 'string', string.unquote($tone), $tone);
+  $size-settings: map.get($size-config, $size);
+  $tone-settings: map.get($tone-config, $tone);
+
+  .switcherField {
+    width: #{map.get($size-settings, width)}px;
+    height: #{map.get($size-settings, height)}px;
+
+    display: flex;
+    justify-content: left;
+
+    border-radius: 12px;
+    padding: 2px;
+    background-color: map.get($tone-settings, main);
+
+    &:after {
+      flex: none;
+      content: '';
+      width: #{map.get($size-settings, radius)}px;
+      height: #{map.get($size-settings, radius)}px;
+      border-radius: 50%;
+      box-shadow: 0 1px 2px 0 #1018280F, 0 1px 3px 0 #1018281A;
+      background-color: $base-white;
+    }
+
+    &:hover {
+      background-color: map.get($tone-settings, hover);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 4px $gray-100;
+    }
+
+    &.active {
+      justify-content: right;
+      background-color: $blue-dark-500;
+
+      &:hover {
+        background-color: $blue-dark-600;
+      }
+    }
+
+    &:disabled {
+      cursor: default;
+      background-color: map.get($tone-settings, main);
+
+      &:hover {
+        background-color: map.get($tone-settings, main);
+      }
+    }
+
+    @content;
+  }
+}

package/dist/scss/ui/InputFields/TextareaField/index.scss

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

package/dist/scss/ui/InputFields/TextareaField/styles/mixin/index.scss

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

package/dist/scss/ui/InputFields/TextareaField/styles/mixin/textareaField.scss

@@ -0,0 +1,41 @@
+@use '../../../../../styles' as *;
+
+@mixin insertTextareaField() {
+  .textareaField {
+    width: 100%;
+    height: fit-content;
+    min-height: 68px;
+
+    resize: none;
+    border-radius: 8px;
+    padding: 10px 12px;
+
+    background-color: $base-white;
+    box-shadow: 0 0 0 1px $gray-300, 0 1px 2px 0 #1018280D;
+
+    @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-900);
+
+    &::placeholder {
+      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-400);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 #1018280D;
+    }
+
+    &:disabled {
+      background-color: $gray-100;
+      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-500);
+    }
+
+    &.isError {
+      border: 1px solid $error-300;
+
+      &:focus {
+        box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 #1018280D;
+      }
+    }
+
+    @content;
+  }
+}

package/dist/scss/ui/InputFields/index.scss

@@ -0,0 +1,7 @@
+@forward "FlexField";
+@forward "InputFieldWrapper";
+@forward "RadioField";
+@forward "SelectField";
+@forward "SwitcherField";
+@forward "TextareaField";
+@forward "InputField";

package/dist/scss/ui/MicroButton/index.scss

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

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

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

package/dist/scss/ui/MicroButton/styles/mixins/base-button.scss

@@ -0,0 +1,10 @@
+@use '../../../../styles' as *;
+
+@mixin base-button() {
+  width: fit-content;
+  height: fit-content;
+  @include modify-flex(row, center, center);
+  @include modify-svg() {
+    flex: none;
+  }
+}

package/dist/scss/ui/MicroButton/styles/mixins/index.scss

@@ -0,0 +1 @@
+@forward "micro-button";