torgbox-ui 1.0.8 → 1.0.9

package/dist/cjs/shared/ui/Avatar/Avatar.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const Avatar = (props) => {
+    const { label, size = 'md', onClickAvatar } = props;
+    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', onClick: onClickAvatar, className: (0, classnames_1.default)('user-avatar', `user-avatar--${size}`), children: label }));
+};
+exports.Avatar = Avatar;

package/dist/cjs/shared/ui/Avatar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var Avatar_1 = require("./Avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });

package/dist/cjs/shared/ui/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var Avatar_1 = require("./Avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });

package/dist/cjs/tools/customValidators.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.innValidator = exports.passwordValidator = exports.phoneValidator = exports.nameValidator = exports.emailValidator = void 0;
+const regExp_1 = require("./regExp");
+const emailValidator = (value) => {
+    return regExp_1.regExpEmail.test(String(value));
+};
+exports.emailValidator = emailValidator;
+const nameValidator = (value) => {
+    if (Array.isArray(value)) {
+        return value.length > 1 && value.every((v) => regExp_1.regExpName.test(String(v)));
+    }
+    return regExp_1.regExpName.test(String(value));
+};
+exports.nameValidator = nameValidator;
+const phoneValidator = (value) => {
+    return regExp_1.regExpPhoneNumber.test(String(value));
+};
+exports.phoneValidator = phoneValidator;
+const passwordValidator = (value) => {
+    return regExp_1.regExpPassword.test(String(value));
+};
+exports.passwordValidator = passwordValidator;
+const innValidator = (value) => {
+    return regExp_1.regExpInn.test(String(value));
+};
+exports.innValidator = innValidator;

package/dist/cjs/tools/getCoords.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCoords = void 0;
+const getCoords = (ref) => {
+    const coordsOfRef = ref?.current?.getBoundingClientRect();
+    const scrollTop = window?.scrollY || 0;
+    const scrollLeft = window?.scrollX || 0;
+    if (coordsOfRef) {
+        return {
+            leftViewport: coordsOfRef.left,
+            topViewport: coordsOfRef.top,
+            bottomViewport: coordsOfRef.bottom,
+            leftDocument: coordsOfRef.left + scrollLeft,
+            topDocument: coordsOfRef.top + scrollTop,
+            bottomDocument: coordsOfRef.bottom + scrollTop,
+            width: coordsOfRef.width,
+            height: coordsOfRef.height,
+        };
+    }
+    return null;
+};
+exports.getCoords = getCoords;

package/dist/cjs/tools/regExp.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.regExpInn = exports.regExpPassword = exports.regExpPhoneNumber = exports.regExpName = exports.regExpEmail = void 0;
+exports.regExpEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+exports.regExpName = /^[a-zA-Zа-яА-ЯёЁ][a-zA-Z-а-яА-ЯёЁ ]+[a-zA-Zа-яА-ЯёЁ]?$/;
+exports.regExpPhoneNumber = /^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){11,14}(\s*)?$/;
+exports.regExpPassword = /^.{6,}$/;
+exports.regExpInn = /^(\d{10}|\d{12})$/;

package/dist/cjs/ui.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Inputs"), exports);
+__exportStar(require("./Utils"), exports);
+__exportStar(require("./shared/ui"), exports);

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

@@ -0,0 +1,17 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export type TButtonSize = 'large' | 'medium' | 'small';
+export type TButtonState = 'idle' | 'loading' | 'disabled';
+export type TIconPosition = 'left' | 'right';
+export type TButtonVariant = 'filled' | 'outlined-color' | 'outlined-neutral' | 'clear-color' | 'clear-neutral';
+export interface IButton extends ButtonHTMLAttributes<HTMLButtonElement> {
+    label?: string;
+    size?: TButtonSize;
+    variant?: TButtonVariant;
+    state?: TButtonState;
+    iconComponent?: ReactNode;
+    iconPosition?: TIconPosition;
+    onClick?: () => void;
+    fullWidth?: boolean;
+    className?: string;
+}
+export declare const Button: (props: IButton) => React.JSX.Element;

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

@@ -0,0 +1,358 @@
+// 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

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

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

@@ -0,0 +1,11 @@
+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.scss

@@ -0,0 +1,63 @@
+$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

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

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

@@ -0,0 +1,7 @@
+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/ErrorMessages.d.ts

@@ -0,0 +1,3 @@
+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/index.js

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

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

@@ -0,0 +1 @@
+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/InnField.d.ts

@@ -0,0 +1,6 @@
+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/index.js

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

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

@@ -0,0 +1,8 @@
+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/NameField.d.ts

@@ -0,0 +1,9 @@
+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 {};

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

@@ -0,0 +1,2 @@
+export { NameField } from './NameField';
+export { emptyFirstNameError, emptyLastNameError, emptyPatronymicNameError, emptyFullNameError, notCorrectFirstNameError, notCorrectLastNameError, notCorrectPatronymicNameError, notCorrectFullNameError } from './ErrorMessages';

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

@@ -0,0 +1 @@
+export declare const otpError = "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 \u043A\u043E\u0434. \u0421\u0432\u0435\u0440\u044C\u0442\u0435\u0441\u044C \u0441 \u043F\u0438\u0441\u044C\u043C\u043E\u043C";

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

@@ -0,0 +1,9 @@
+export interface IOtpInput {
+    length?: number;
+    errorMessage: string;
+    responseReceived: boolean;
+    loading: boolean;
+    onComplete: (pin: string) => void;
+    setErrorMessage: (value: string) => void;
+}
+export declare const OtpInput: (props: IOtpInput) => JSX.Element;

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

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

package/dist/esm/Inputs/OtpInput/otpInput.scss

@@ -0,0 +1,39 @@
+$border-color:       $neutral-border-low;
+$border-color-focus: $primary-border-high;
+$error-message:      $error-high;
+$border-error:       $error-border-high;
+
+.otp {
+  display: flex;
+  gap: 8px;
+  position: relative;
+
+  &__input {
+    font-size: 16px;
+    line-height: 24px;
+    height: 44px;
+    width: 36px;
+    border: 1px solid $border-color;
+    border-radius: 4px;
+    text-align: center;
+    outline: none;
+
+    &:focus,
+    :active {
+      border-color: $border-color-focus;
+    }
+
+    &--error,
+    &--error:focus {
+      border-color: $border-error;
+    }
+  }
+  &__error {
+    font-size: 12px;
+    line-height: 16px;
+    color: $error-message;
+    position: absolute;
+    bottom: -16px;
+    left: 0;
+  }
+}

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

@@ -0,0 +1,2 @@
+export declare const emptyPasswordError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043F\u0430\u0440\u043E\u043B\u044C";
+export declare const notCorrectPasswordError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043F\u0430\u0440\u043E\u043B\u044C \u043D\u0435 \u043C\u0435\u043D\u0435\u0435 6 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432";