torgbox-ui 1.0.11 → 1.0.13

package/dist/esm/Inputs/Button/button.scss

@@ -1,358 +0,0 @@
-// Filled
-$filled:               $primary-high;
-$filled-text:          $inverse;
-$filled-hover:         $primary-A92;
-$filled-focus:         $primary-A88;
-$filled-active:        $primary-A88;
-
-$filled-disabled:      $neutral-A12;
-$filled-disabled-text: $neutral-A48;
-
-
-// Outlined-color
-$outlined-color:                 transparent;
-$outlined-color-text:            $primary-high;
-$outlined-color-border:          $primary-border-low;
-$outlined-color-hover:           $primary-A8;
-$outlined-color-focus:           $primary-A12;
-$outlined-color-active:          $primary-A12;
-
-$outlined-color-disabled-border: $neutral-A12;
-$outlined-color-disabled-text:   $neutral-A48;
-
-
-// Outlined-neutral
-$outlined-neutral:                transparent;
-$outlined-neutral-text:           $neutral-middle;
-$outlined-neutral-border:         $neutral-border-low;
-$outlined-neutral-hover:          $neutral-A8;
-$outlined-neutral-focus:          $neutral-A12;
-$outlined-neutral-active:         $neutral-A12;
-
-$outlined-neutral-disable-border: $neutral-border-low;
-$outlined-neutral-disable-text:   $neutral-A48;
-
-
-// Clear-color
-$clear-color:              transparent;
-$clear-color-text:         $primary-high;
-$clear-color-hover:        $primary-A8;
-$clear-color-focus:        $primary-A12;
-$clear-color-active:       $primary-A12;
-
-$clear-color-disable-text: $neutral-A48;
-
-
-// Clear-neutral
-$clear-neutral:              transparent;
-$clear-neutral-text:         $neutral-middle;
-$clear-neutral-hover:        $neutral-A8;;
-$clear-neutral-focus:        $neutral-A12;
-$clear-neutral-active:       $neutral-A12;
-
-$clear-neutral-disable-text: $neutral-A48;
-
-.btn {
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  min-width: 96px;
-  
-  font-family: 'Roboto Medium', sans-serif;
-
-  border: 1px solid transparent;
-  border-radius: 4px;
-
-  &--large {
-    padding: 9px;
-  }
-
-  &--medium {
-    padding: 7px;
-  }
-
-  &--small {
-    padding: 3px;
-  }
-
-  &--reverse {
-    flex-direction: row-reverse;
-  }
-
-  &--with-icon {
-    min-width: 120px;
-  }
-
-  &--only-icon {
-    min-width: unset;
-  }
-
-  &__label {
-    &--large {
-      padding: 0 10px;
-      font-size: 16px;
-      line-height: 24px;
-    }
-
-    &--medium {
-      padding: 0 8px;
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    &--small {
-      padding: 0 8px;
-      font-size: 14px;
-      line-height: 20px;
-    }
-  }
-
-  &__icon {
-    display: flex;
-    
-    &--large {
-      width: 24px;
-
-      &--left {
-        padding-right: 2px;
-        padding-left: 6px;
-      }
-
-      &--right {
-        padding-right: 6px;
-        padding-left: 2px;
-      }
-    }
-
-    &--medium {
-      width: 20px;
-
-      &--left {
-        padding-left: 4px;
-      }
-
-      &--right {
-        padding-right: 4px;
-      }
-    }
-
-    &--small {
-      width: 20px;
-
-      &--left {
-        margin-right: -4px;
-        padding-left: 4px;
-      }
-
-      &--right {
-        margin-left: -4px;
-        padding-right: 4px;
-      }
-    }
-  }
-
-  &__spinner {
-    &--small {
-      width: 16px;
-      padding: 2px;
-    }
-  
-    &--medium {
-      width: 20px;
-    }
-  
-    &--large {
-      width: 24px;
-    }  
-
-      &--filled {
-      stroke: $filled-text;
-    }
-
-    &--outlined-color {
-      stroke: $outlined-color-text
-    }
-
-    &--outlined-neutral {
-      stroke: $outlined-neutral-text;
-    }
-
-    &--clear-color {
-      stroke: $clear-color-text
-    }
-
-    &--clear-neutral {
-      stroke: $clear-neutral-text;
-    }
-  }
-
-  &--fullWidth {
-    width: 100%;
-  }
-
-  &__filled {
-    color: $filled-text;
-    background-color: $filled;
-    fill: $filled-text;
-
-    &--idle {
-      &:hover {
-        background-color: $filled-hover;
-      }
-
-      &:focus {
-        background-color: $filled-focus;
-      }
-
-      &:active {
-        background-color: $filled-active;
-      }
-    }
-
-    &--loading {
-      cursor: default;
-      z-index: 2;
-    }
-
-    &--disabled {
-      cursor: default;
-      color: $filled-disabled-text;
-      background-color: $filled-disabled;
-      fill: $filled-disabled-text;
-    }
-  }
-
-  &__outlined-color {
-    color: $outlined-color-text;
-    background-color: $outlined-color;
-    border: 1px solid $outlined-color-border;
-    fill: $outlined-color-text;
-
-    &--idle {
-      &:hover {
-        background-color: $outlined-color-hover;
-      }
-
-      &:focus {
-        background-color: $outlined-color-focus;
-      }
-
-      &:active {
-        background-color: $outlined-color-active;
-      }
-    }
-
-    &--loading {
-      cursor: default;
-      z-index: 2;
-    }
-
-    &--disabled {
-      cursor: default;
-
-      color: $outlined-color-disabled-text;
-
-      border: 1px solid $outlined-color-disabled-border;
-
-      fill: $outlined-color-disabled-text;
-    }
-  }
-
-  &__outlined-neutral {
-    color: $outlined-neutral-text;
-    background-color: $outlined-neutral;
-    border: 1px solid $outlined-neutral-border;
-    fill: $outlined-neutral-text;
-
-    &--idle {
-      &:hover {
-        background-color: $outlined-neutral-hover;
-      }
-
-      &:focus {
-        background-color: $outlined-neutral-focus;
-      }
-
-      &:active {
-        background-color: $outlined-neutral-active;
-      }
-    }
-
-    &--loading {
-      cursor: default;
-    }
-
-    &--disabled {
-      cursor: default;
-
-      color: $outlined-neutral-disable-text;
-
-      border: 1px solid $outlined-neutral-disable-border;
-
-      fill: $outlined-neutral-disable-text;
-    }
-  }
-
-  &__clear-color {
-    color: $clear-color-text;
-    background-color: $clear-color;
-    fill: $clear-color-text;
-
-    &--idle {
-      &:hover {
-        background-color: $clear-color-hover;
-      }
-
-      &:focus {
-        background-color: $clear-color-focus;
-      }
-
-      &:active {
-        background-color: $clear-color-active;
-      }
-    }
-
-    &--loading {
-      cursor: default;
-    }
-
-    &--disabled {
-      cursor: default;
-      color: $clear-color-disable-text;
-      fill: $clear-color-disable-text;
-    }
-  }
-
-  &__clear-neutral {
-    color: $clear-neutral-text;
-    background-color: $clear-neutral;
-    fill: $clear-neutral-text;
-
-    &--idle {
-      &:hover {
-        background-color: $clear-neutral-hover;
-      }
-
-      &:focus {
-        background-color: $clear-neutral-focus;
-      }
-
-      &:active {
-        background-color: $clear-neutral-active;
-      }
-    }
-
-    &--loading {
-      cursor: default;
-    }
-
-    &--disabled {
-      cursor: default;
-      color: $clear-neutral-disable-text;
-      fill: $clear-neutral-disable-text;
-    }
-  }
-}

package/dist/esm/Inputs/Button/index.d.ts

@@ -1 +0,0 @@
-export { Button, type IButton, type TButtonState } from './Button';

package/dist/esm/Inputs/Button/index.js

@@ -1 +0,0 @@
-export { Button } from './Button';

package/dist/esm/Inputs/Checkbox/Checkbox.d.ts

@@ -1,11 +0,0 @@
-type TCheckBoxSize = 'small' | 'medium';
-export interface ICheckbox {
-    label?: string;
-    size?: TCheckBoxSize;
-    disabled?: boolean;
-    checked: boolean;
-    partial?: boolean;
-    onClick: (state: boolean) => void;
-}
-export declare const Checkbox: (props: ICheckbox) => JSX.Element;
-export {};

package/dist/esm/Inputs/Checkbox/Checkbox.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
-import CheckIcon from '../../assets/img/checked.svg';
-import PartialIcon from '../../assets/img/partial-checked.svg';
-export const Checkbox = (props) => {
-    const { label = '', disabled = false, partial = false, size = 'medium', checked, onClick } = props;
-    const iconMods = [
-        'checkbox__icon',
-        `checkbox__icon--${size}`,
-        {
-            'checkbox__icon--active': checked,
-            'checkbox__icon--disable': disabled
-        }
-    ];
-    const labelMods = [
-        'checkbox__label',
-        `checkbox__label--${size}`,
-        { 'checkbox__label--disable': disabled }
-    ];
-    const icon = () => {
-        if (!checked) {
-            return;
-        }
-        return (partial ? _jsx(PartialIcon, {}) : _jsx(CheckIcon, {}));
-    };
-    return (_jsx("div", { className: 'checkbox', children: _jsxs("label", { className: cn(labelMods), children: [_jsx("input", { type: 'checkbox', disabled: disabled, onChange: () => {
-                        onClick(!checked);
-                    } }), _jsx("span", { className: cn(iconMods), children: icon() }), label] }) }));
-};

package/dist/esm/Inputs/Checkbox/checkbox.scss

@@ -1,63 +0,0 @@
-$border:       $neutral-low;
-$border-hover: $neutral-middle;
-$text:         $neutral-high;
-$icon-active:  $primary-high;
-$disable:      $neutral-A48;
-
-.checkbox {
-  user-select: none;
-
-  &__label {
-    color: $text;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    cursor: pointer;
-
-    &--small {
-      font-size: 12px;
-      line-height: 16px;
-    }
-
-    &--disable {
-      color: $disable;
-      cursor: default;
-    }
-  }
-
-  input[type="checkbox"] {
-    display: none;
-  }
-
-  &__icon {
-    box-sizing: border-box;
-    overflow: hidden;
-    border: 1.75px solid $border;
-    border-radius: 2px;
-    width: 15px;
-    height: 15px;
-
-    &:hover {
-      border-color: $border-hover;
-    }
-
-    &--active {
-      border: none;
-      fill: $primary-high;
-    }
-
-    &--disable {
-      border-color: $disable;
-      fill: $disable;
-
-      &:hover {
-        border-color: $disable;
-      }
-    }
-
-    &--small {
-      width: 12px;
-      height: 12px;
-    }
-  }
-}

package/dist/esm/Inputs/Checkbox/index.d.ts

@@ -1 +0,0 @@
-export { Checkbox, type ICheckbox } from './Checkbox';

package/dist/esm/Inputs/Checkbox/index.js

@@ -1 +0,0 @@
-export { Checkbox } from './Checkbox';

package/dist/esm/Inputs/EmailField/EmailField.d.ts

@@ -1,7 +0,0 @@
-import { type THTMLInput } from '../TextField';
-export interface IEmailField extends THTMLInput {
-    onValidated: (state: boolean) => void;
-    onTextValid: (value: string) => void;
-    checkEmail?: boolean;
-}
-export declare const EmailField: (props: IEmailField) => JSX.Element;

package/dist/esm/Inputs/EmailField/EmailField.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { debounce } from 'lodash/fp';
-import { useCallback, useEffect, useState } from 'react';
-import { emailValidator } from '../../tools/customValidators';
-import { TextField } from '../TextField';
-import { emptyEmailError, notCorrectEmailError, checkEmailError } from './ErrorMessages';
-export const EmailField = (props) => {
-    const { checkEmail = false, onValidated, onTextValid } = props;
-    const [errorMessage, setErrorMessage] = useState('');
-    const [touched, setTouched] = useState(false);
-    const [email, setEmail] = useState('');
-    const [alwaysShowError, setAlwaysShowError] = useState(false);
-    const [emailExist, setEmailExist] = useState(false);
-    const checkEmailExist = useCallback(debounce(500, (email) => {
-        if (email !== 'asd@asd.ru') {
-            setErrorMessage(checkEmailError);
-            setEmailExist(false);
-            setAlwaysShowError(true);
-            return;
-        }
-        setErrorMessage('');
-        setEmailExist(true);
-    }), []);
-    const acceptEmailHandler = useCallback(() => {
-        onValidated(true);
-        onTextValid(email);
-    }, [email, onTextValid, onValidated]);
-    useEffect(() => {
-        if (!touched) {
-            return;
-        }
-        const valid = emailValidator(email);
-        if (!valid) {
-            setAlwaysShowError(false);
-            onValidated(false);
-            onTextValid('');
-            const error = (!email && emptyEmailError) ||
-                (!valid && notCorrectEmailError) ||
-                '';
-            setErrorMessage(error);
-            return;
-        }
-        if (checkEmail) {
-            checkEmailExist(email);
-            return;
-        }
-        setErrorMessage('');
-        acceptEmailHandler();
-    }, [checkEmail, checkEmailExist, acceptEmailHandler, email, onTextValid, onValidated, touched]);
-    useEffect(() => {
-        if (!checkEmail) {
-            return;
-        }
-        if (!emailExist || errorMessage) {
-            onValidated(false);
-            return;
-        }
-        acceptEmailHandler();
-    }, [acceptEmailHandler, checkEmail, emailExist, errorMessage, onValidated]);
-    return (_jsx(TextField, { onChange: setEmail, onTouched: setTouched, state: touched && errorMessage ? 'error' : 'idle', errorMessage: errorMessage, label: 'Email', type: 'email', value: email, alwaysShowError: alwaysShowError, required: true, checkIcon: true, ...props }));
-};

package/dist/esm/Inputs/EmailField/ErrorMessages.d.ts

@@ -1,3 +0,0 @@
-export declare const emptyEmailError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 email";
-export declare const notCorrectEmailError = "\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u044B\u0439 email";
-export declare const checkEmailError = "\u041F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C \u0441 \u0442\u0430\u043A\u0438\u043C email \u043D\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043D";

package/dist/esm/Inputs/EmailField/ErrorMessages.js

@@ -1,3 +0,0 @@
-export const emptyEmailError = 'Введите email';
-export const notCorrectEmailError = 'Некорректный email';
-export const checkEmailError = 'Пользователь с таким email не зарегистрирован';

package/dist/esm/Inputs/EmailField/index.d.ts

@@ -1,2 +0,0 @@
-export { EmailField } from './EmailField';
-export { emptyEmailError, notCorrectEmailError, checkEmailError } from './ErrorMessages';

package/dist/esm/Inputs/EmailField/index.js

@@ -1,2 +0,0 @@
-export { EmailField } from './EmailField';
-export { emptyEmailError, notCorrectEmailError, checkEmailError } from './ErrorMessages';

package/dist/esm/Inputs/InnField/ErrorMessages.d.ts

@@ -1 +0,0 @@
-export declare const InnError = "\u0418\u041D\u041D - 10 \u0446\u0438\u0444\u0440 \u0434\u043B\u044F \u042E\u041B \u0438\u043B\u0438 12 \u0434\u043B\u044F \u0424\u041B";

package/dist/esm/Inputs/InnField/ErrorMessages.js

@@ -1 +0,0 @@
-export const InnError = 'ИНН - 10 цифр для ЮЛ или 12 для ФЛ';

package/dist/esm/Inputs/InnField/InnField.d.ts

@@ -1,6 +0,0 @@
-import { type THTMLInput } from '../TextField';
-export interface IInnField extends THTMLInput {
-    onValidated: (state: boolean) => void;
-    onTextValid: (value: string) => void;
-}
-export declare const InnField: (props: IInnField) => JSX.Element;

package/dist/esm/Inputs/InnField/InnField.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { innValidator } from '../../tools/customValidators';
-import { TextField } from '../TextField';
-import { InnError } from './ErrorMessages';
-export const InnField = (props) => {
-    const { onValidated, onTextValid } = props;
-    const [errorMessage, setErrorMessage] = useState('');
-    const [touched, setTouched] = useState(false);
-    const [inn, setInn] = useState('');
-    const getInputNumbersValue = (value) => {
-        return value.replace(/\D/g, '');
-    };
-    const onInnInput = (value, e) => {
-        setInn(getInputNumbersValue(value));
-    };
-    useEffect(() => {
-        if (!touched) {
-            return;
-        }
-        const valid = innValidator(inn);
-        if (!valid) {
-            onValidated(false);
-            onTextValid('');
-            setErrorMessage(InnError);
-            return;
-        }
-        onValidated(true);
-        onTextValid(inn);
-        setErrorMessage('');
-    }, [inn, onTextValid, onValidated, touched]);
-    return (_jsx(TextField, { onChange: onInnInput, onTouched: setTouched, state: touched && errorMessage ? 'error' : 'idle', errorMessage: errorMessage, label: '\u0418\u041D\u041D', type: 'text', description: '\u0412\u0432\u0435\u0434\u0438\u0442\u0435 10 \u0446\u0438\u0444\u0440 \u0434\u043B\u044F \u042E\u041B \u0438\u043B\u0438 12 \u0434\u043B\u044F \u0424\u041B', value: inn, maxLength: 12, required: true, searchIcon: true, ...props }));
-};

package/dist/esm/Inputs/InnField/index.d.ts

@@ -1,2 +0,0 @@
-export { InnField } from './InnField';
-export { InnError } from './ErrorMessages';

package/dist/esm/Inputs/InnField/index.js

@@ -1,2 +0,0 @@
-export { InnField } from './InnField';
-export { InnError } from './ErrorMessages';

package/dist/esm/Inputs/NameField/ErrorMessages.d.ts

@@ -1,8 +0,0 @@
-export declare const emptyFirstNameError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u043C\u044F";
-export declare const emptyLastNameError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0444\u0430\u043C\u0438\u043B\u0438\u044E";
-export declare const emptyPatronymicNameError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043E\u0442\u0447\u0435\u0441\u0442\u0432\u043E";
-export declare const emptyFullNameError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0424\u0418\u041E";
-export declare const notCorrectFirstNameError = "\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0435 \u0438\u043C\u044F";
-export declare const notCorrectLastNameError = "\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u0430\u044F \u0444\u0430\u043C\u0438\u043B\u0438\u044F";
-export declare const notCorrectPatronymicNameError = "\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0435 \u043E\u0442\u0447\u0435\u0441\u0442\u0432\u043E";
-export declare const notCorrectFullNameError = "\u041D\u0435\u043A\u043E\u0440\u0440\u0435\u043A\u0442\u043D\u043E\u0435 \u0424\u0418\u041E";

package/dist/esm/Inputs/NameField/ErrorMessages.js

@@ -1,8 +0,0 @@
-export const emptyFirstNameError = 'Введите имя';
-export const emptyLastNameError = 'Введите фамилию';
-export const emptyPatronymicNameError = 'Введите отчество';
-export const emptyFullNameError = 'Введите ФИО';
-export const notCorrectFirstNameError = 'Некорректное имя';
-export const notCorrectLastNameError = 'Некорректная фамилия';
-export const notCorrectPatronymicNameError = 'Некорректное отчество';
-export const notCorrectFullNameError = 'Некорректное ФИО';

package/dist/esm/Inputs/NameField/NameField.d.ts

@@ -1,9 +0,0 @@
-import { type THTMLInput } from '../TextField';
-type TNameType = 'firstName' | 'lastName' | 'patronymic' | 'fullName';
-export interface INameField extends THTMLInput {
-    onValidated: (state: boolean) => void;
-    onTextValid: (value: string) => void;
-    nameType?: TNameType;
-}
-export declare const NameField: (props: INameField) => JSX.Element;
-export {};