indicator-ui 0.0.152 → 0.0.154

package/dist/scss/styles/fonts.scss

@@ -28,4 +28,32 @@
   font-style: normal;
 }
 
-$golos-ui: 'Golos UI', sans-serif;
+@font-face {
+  font-family: "Golos Text";
+  src: local("Golos Text"),
+  url("./fontsAssets/Golos-Text/golos-text_regular.ttf") format("truetype"),
+  url("./fontsAssets/Golos-Text/golos-text_regular.woff2") format("woff2"),
+  url("./fontsAssets/Golos-Text/golos-text_regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Golos Text";
+  src: local("Golos Text"),
+  url("./fontsAssets/Golos-Text/golos-text_medium.ttf") format("truetype"),
+  url("./fontsAssets/Golos-Text/golos-text_medium.woff2") format("woff2"),
+  url("./fontsAssets/Golos-Text/golos-text_medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Golos Text";
+  src: local("Golos Text"),
+  url("./fontsAssets/Golos-Text/golos-text_demibold.ttf") format("truetype"),
+  url("./fontsAssets/Golos-Text/golos-text_demibold.woff2") format("woff2"),
+  url("./fontsAssets/Golos-Text/golos-text_demibold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}

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

@@ -1,11 +1,14 @@
 @use "../fonts";
 
+$golos-ui: 'Golos UI', sans-serif;
+$golos-text: 'Golos Text', sans-serif;
+
 @mixin fnt(
   $size: 16,
   $line-height: 24,
   $color: black,
   $weight: 400,
-  $family: fonts.$golos-ui,
+  $family: $golos-ui,
   $stretch: normal,
   $style: normal,
   $variant: normal,

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

@@ -134,7 +134,7 @@
     }
 
     &.disabled {
-      background-color: var(--gray-100);
+      background-color: var(--gray-50);
       cursor: default;
 
       * {

package/dist/types/src/ui/Checkbox/types/CheckboxTypes.d.ts

@@ -6,6 +6,9 @@ export type CheckboxClassNameType = {
     error?: string;
     textBlock?: string;
     text?: string;
+    textBold?: string;
+    hover?: string;
+    focus?: string;
     indeterminate?: string;
     supportingText?: string;
     widthFill?: string;

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

@@ -60,4 +60,6 @@ export type FlexFieldPropsType = FieldsBasePropsType<string> & {
      * Событие нажатия на кнопку button.
      */
     onButtonClick?: () => void;
+    /** Дополнительные имена стилей */
+    additionStyles?: string | string[];
 };

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

@@ -20,5 +20,6 @@ declare const FlexField: React.ForwardRefExoticComponent<import("../..").FieldsB
     dropdownState?: boolean | string;
     buttonState?: "gray" | "red" | string;
     onButtonClick?: () => void;
+    additionStyles?: string | string[];
 } & React.RefAttributes<HTMLDivElement>>;
 export default FlexField;

package/dist/types/src/ui/InputFields/InputField/types/InputFieldTypes.d.ts

@@ -6,13 +6,15 @@ import { TextareaFieldPropsType } from '../../TextareaField';
 import { InputFieldWrapperPropsType } from "../../InputFieldWrapper";
 import { DateTimeFieldPropsType } from "../../DateTimeField";
 import { DateTimeRangeFieldPropsType } from "../../../../ui/InputFields/DateTimeRangeField";
-export type InputFieldTypes = 'switcher' | 'select' | 'radio' | 'textarea' | 'date' | 'time' | 'datetime' | 'datetime-range' | string;
+export type InputFieldTypes = 'switcher' | 'select' | 'radio' | 'checkbox' | 'textarea' | 'date' | 'time' | 'datetime' | 'datetime-range' | 'checkbox' | string;
 export type InputFieldPropsType = Omit<(({
     type?: 'switcher';
 } & SwitcherFieldPropsType) & ({
     type?: 'select';
 } & SelectFieldPropsType) & ({
     type?: 'radio';
+} & RadioFieldPropsType) & ({
+    type?: 'checkbox';
 } & RadioFieldPropsType) & ({
     type?: 'textarea';
 } & TextareaFieldPropsType) & ({

package/dist/types/src/ui/InputFields/RadioField/types/RadioFieldItemTypes.d.ts

@@ -5,6 +5,7 @@ export type RadioFieldOwnerItemPropsType = {
     disabled?: boolean;
 };
 export type RadioFieldItemPropsType = {
+    type: 'radio' | 'checkbox';
     option: RadioFieldOptionsItemType;
     onClick?: () => void;
     active?: boolean;

package/dist/types/src/ui/InputFields/RadioField/types/RadioFieldTypes.d.ts

@@ -4,6 +4,7 @@ import { FieldsBasePropsType } from '../../FieldsBase';
 export type RadioFieldOptionsItemType = {
     value: any;
     label?: string;
+    description?: string;
     component?: ReactElement<RadioFieldOwnerItemPropsType>;
 };
 export type RadioFieldOptionsType = RadioFieldOptionsItemType[];
@@ -12,4 +13,5 @@ export type RadioFieldPropsType = FieldsBasePropsType<RadioFieldValueType> & {
     options?: RadioFieldOptionsType;
     multiple?: boolean;
     width?: 'hug' | 'fill';
+    type?: 'checkbox' | 'radio';
 };

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

@@ -1,3 +1,3 @@
 import React from "react";
 import { RadioFieldPropsType } from "../types";
-export default function RadioField({ value, onChange, options, required, multiple, disabled, width, }: RadioFieldPropsType): React.JSX.Element;
+export default function RadioField({ value, onChange, options, required, multiple, disabled, width, type, }: RadioFieldPropsType): React.JSX.Element;

package/dist/types/src/ui/InputFields/RadioField/ui/RadioFieldItem.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { RadioFieldItemPropsType } from "../types";
-export default function RadioFieldItem({ option, onClick, active, disabled, width, }: RadioFieldItemPropsType): React.JSX.Element;
+export default function RadioFieldItem({ type, option, onClick, active, disabled, width, }: RadioFieldItemPropsType): React.JSX.Element;

package/package.json

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

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

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

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

@@ -1,17 +0,0 @@
-@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/RadioField/styles/mixins/index.scss

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

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

@@ -1,45 +0,0 @@
-@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 var(--gray-300);
-      background-color: var(--base-white);
-
-      @include centerInsideContent();
-    }
-
-    .label {
-      @include fnt($size: 14, $line-height: 20, $weight: 500, $color: var(--gray-700));
-    }
-
-    &.active {
-      .checkbox {
-        &:after {
-          content: '';
-          flex: none;
-          width: 6px;
-          height: 6px;
-          border-radius: 50%;
-          background-color: var(--blue-dark-500);
-        }
-
-        border: 1px solid var(--blue-dark-500);
-      }
-    }
-
-    @content;
-  }
-}

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

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

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

@@ -1,92 +0,0 @@
-@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: var(--gray-200),
-                hover: var(--gray-300),
-        ),
-        dark: (
-                main: var(--gray-300),
-                hover: var(--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: var(--base-white);
-    }
-
-    &:hover {
-      background-color: map.get($tone-settings, hover);
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 4px var(--gray-100);
-    }
-
-    &.active {
-      justify-content: right;
-      background-color: var(--blue-dark-500);
-
-      &:hover {
-        background-color: var(--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/styles/mixin/index.scss

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

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

@@ -1,49 +0,0 @@
-@use '../../../../../styles' as *;
-
-@mixin insertTextareaField() {
-  .textareaField {
-    width: 100%;
-    height: fit-content;
-    min-height: 68px;
-
-    resize: none;
-    border-radius: 8px;
-    // С учетом border
-    padding: 9px 11px;
-
-    background-color: var(--base-white);
-    border: 1px solid var(--gray-300);
-    box-shadow: 0 1px 2px 0 #1018280D;
-
-    transition: all ease-out 200ms;
-
-    @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-900));
-
-    &::placeholder {
-      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-400));
-    }
-
-    &:focus {
-      border: 1px solid var(--gray-400);
-    }
-
-    &.offFocus {
-
-    }
-
-    &:disabled {
-      background-color: var(--gray-100);
-      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-500));
-    }
-
-    &.isError {
-      border: 1px solid var(--error-300);
-
-      &:focus {
-        border: 1px solid var(--error-400);
-      }
-    }
-
-    @content;
-  }
-}

package/dist/types/src/ui/InputFields/InputField/styles/index.d.ts

@@ -1 +0,0 @@
-export { default as InputFieldStyle } from './InputField.module.scss';

package/dist/types/src/ui/InputFields/RadioField/styles/index.d.ts

@@ -1 +0,0 @@
-export { default as RadioFieldStyle } from './RadioField.module.scss';

package/dist/types/src/ui/InputFields/SwitcherField/styles/index.d.ts

@@ -1 +0,0 @@
-export { default as SwitcherFieldStyle } from './SwitcherField.module.scss';