torgbox-ui 1.0.7 → 1.0.8

package/dist/src/Inputs/InnField/InnField.js

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ITextField } from '../TextField';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<ITextField>;
+export declare const InnFieldInactive: Story;
+export declare const InnFieldError: Story;
+export declare const InnFieldWithValue: Story;

package/dist/src/Inputs/InnField/InnField.stories.js

@@ -0,0 +1,43 @@
+import { InnField } from './InnField';
+const meta = {
+    title: 'Inputs/InnField',
+    component: InnField,
+    tags: ['autodocs'],
+    args: {
+        onValidated: () => { },
+        onTextValid: () => { }
+    }
+};
+export default meta;
+export const InnFieldInactive = {
+    args: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12816-23279&mode=design&t=wnKZYt4uc5mLPiqN-4',
+        }
+    }
+};
+export const InnFieldError = {
+    args: {
+        state: 'error',
+        errorMessage: 'Some error'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12816-23279&mode=design&t=wnKZYt4uc5mLPiqN-4',
+        },
+    },
+};
+export const InnFieldWithValue = {
+    args: {
+        value: '1024120485',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12816-23279&mode=design&t=wnKZYt4uc5mLPiqN-4',
+        },
+    },
+};

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

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

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

@@ -0,0 +1,8 @@
+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/src/Inputs/NameField/NameField.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { nameValidator } from '../../tools/customValidators';
+import { TextField } from '../TextField';
+import { emptyFirstNameError, emptyLastNameError, emptyPatronymicNameError, emptyFullNameError, notCorrectFirstNameError, notCorrectLastNameError, notCorrectPatronymicNameError, notCorrectFullNameError } from './ErrorMessages';
+;
+export const NameField = (props) => {
+    const { nameType = 'fullName', onValidated, onTextValid } = props;
+    const [errorMessage, setErrorMessage] = useState('');
+    const [touched, setTouched] = useState(false);
+    const [name, setName] = useState('');
+    const nameArgs = {
+        firstName: {
+            label: 'Имя',
+            emptyMessage: emptyFirstNameError,
+            notCorrectMessage: notCorrectFirstNameError,
+        },
+        lastName: {
+            label: 'Фамилия',
+            emptyMessage: emptyLastNameError,
+            notCorrectMessage: notCorrectLastNameError,
+        },
+        patronymic: {
+            label: 'Отчество',
+            emptyMessage: emptyPatronymicNameError,
+            notCorrectMessage: notCorrectPatronymicNameError,
+        },
+        fullName: {
+            label: 'ФИО',
+            emptyMessage: emptyFullNameError,
+            notCorrectMessage: notCorrectFullNameError,
+        }
+    };
+    const { label, emptyMessage, notCorrectMessage } = nameArgs[nameType];
+    useEffect(() => {
+        if (!touched) {
+            return;
+        }
+        const valid = nameValidator(nameType === 'fullName' ? name.split(' ') : name);
+        if (!valid) {
+            onValidated(false);
+            onTextValid('');
+            const error = (!name && emptyMessage) ||
+                (!valid && notCorrectMessage) ||
+                '';
+            setErrorMessage(error);
+            return;
+        }
+        onValidated(true);
+        onTextValid(name);
+        setErrorMessage('');
+    }, [emptyMessage, name, nameType, notCorrectMessage, onTextValid, onValidated, touched]);
+    return (_jsx(TextField, { onChange: setName, onTouched: setTouched, state: touched && errorMessage ? 'error' : 'idle', errorMessage: errorMessage, label: label, type: 'text', value: name, required: true, checkIcon: true, ...props }));
+};

package/dist/src/Inputs/NameField/NameField.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ITextField } from '../TextField';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<ITextField>;
+export declare const NameFieldInactive: Story;
+export declare const NameFieldError: Story;
+export declare const NameFieldWithValue: Story;

package/dist/src/Inputs/NameField/NameField.stories.js

@@ -0,0 +1,43 @@
+import { NameField } from './NameField';
+const meta = {
+    title: 'Inputs/NameField',
+    component: NameField,
+    tags: ['autodocs'],
+    args: {
+        onValidated: () => { },
+        onTextValid: () => { }
+    }
+};
+export default meta;
+export const NameFieldInactive = {
+    args: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-34704&mode=design&t=H9AcJSW51fS3aPiW-4',
+        },
+    },
+};
+export const NameFieldError = {
+    args: {
+        state: 'error',
+        errorMessage: 'Some error'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-36350&mode=design&t=H9AcJSW51fS3aPiW-4',
+        },
+    },
+};
+export const NameFieldWithValue = {
+    args: {
+        value: 'Константин',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-34760&mode=design&t=H9AcJSW51fS3aPiW-4',
+        },
+    },
+};

package/dist/src/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/src/Inputs/OtpInput/ErrorMessages.js

@@ -0,0 +1 @@
+export const otpError = 'Неверный код. Сверьтесь с письмом';

package/dist/src/Inputs/OtpInput/OtpInput.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import _ from 'lodash/fp';
+import { useRef, useState, useEffect } from 'react';
+export const OtpInput = (props) => {
+    const { length = 6, onComplete = _.noop, errorMessage = '', setErrorMessage = _.noop, responseReceived = false, loading = false, } = props;
+    const inputRef = useRef(Array(length).fill(null));
+    const [Otp, setOtp] = useState(Array(length).fill(''));
+    const currentTarget = inputRef.current;
+    const handleComplete = (value, index) => {
+        onComplete(value.join(''));
+        currentTarget[index].blur();
+    };
+    const handleTextChange = (index) => (e) => {
+        setErrorMessage('');
+        const newPin = [...Otp];
+        const input = e.target.value.replace(/\D/g, '');
+        newPin[index] = input;
+        setOtp(newPin);
+        if (input.length === 1 && index < length - 1) {
+            currentTarget[index + 1]?.focus();
+        }
+        if (input.length === 0 && index > 0) {
+            currentTarget[index - 1]?.focus();
+        }
+        if (newPin.every((digit) => digit !== '')) {
+            onComplete(newPin.join(''));
+            currentTarget[index].blur();
+        }
+    };
+    const handlePaste = (index) => (e) => {
+        setErrorMessage('');
+        const value = e.clipboardData?.getData('text');
+        const updatedValue = value
+            .toString()
+            .replace(/\D/g, '')
+            .split('')
+            .slice(0, length);
+        setOtp(updatedValue);
+        if (updatedValue.length === length) {
+            handleComplete(updatedValue, index);
+        }
+    };
+    const goToFirstEmptyInput = () => {
+        const firstEmptyInput = currentTarget.findIndex((el) => el.value === '');
+        firstEmptyInput >= 0
+            ?
+                currentTarget[firstEmptyInput].focus()
+            :
+                currentTarget[length - 1].focus();
+        setErrorMessage('');
+    };
+    const handleBackspace = (index) => (e) => {
+        if (e.key === 'Backspace' &&
+            index !== 0 &&
+            currentTarget[index].value.length === 0) {
+            currentTarget[index - 1]?.focus();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (Number.parseInt(e.key) >= 0) {
+            goToFirstEmptyInput();
+        }
+    };
+    const inputMods = [
+        'otp__input',
+        { 'otp__input--error': errorMessage },
+    ];
+    useEffect(() => {
+        !loading && currentTarget[0].focus();
+    }, [responseReceived, loading, currentTarget]);
+    useEffect(() => {
+        if (responseReceived) {
+            setOtp(Array(length).fill(''));
+        }
+    }, [responseReceived, length]);
+    return (_jsxs("div", { className: 'otp', children: [Array.from({ length }, (_, index) => (_jsx("input", { value: Otp[index], onChange: handleTextChange(index), onPaste: handlePaste(index), onKeyUp: handleBackspace(index), onKeyDown: handleKeyDown, onClick: goToFirstEmptyInput, ref: (ref) => (currentTarget[index] = ref), type: 'text', maxLength: 1, className: cn(inputMods), tabIndex: index + 1 }, index))), errorMessage && (_jsx("span", { className: 'otp__error', children: errorMessage }))] }));
+};

package/dist/src/Inputs/OtpInput/OtpInput.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type IOtpInput } from './OtpInput';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<IOtpInput>;
+export declare const OtpInputDefault: Story;
+export declare const OtpInputError: Story;
+export declare const OtpInputWithValue: Story;

package/dist/src/Inputs/OtpInput/OtpInput.stories.js

@@ -0,0 +1,52 @@
+import { userEvent, within } from '@storybook/test';
+import { OtpInput } from './OtpInput';
+const meta = {
+    title: 'Inputs/OtpInput',
+    component: OtpInput,
+    tags: ['autodocs'],
+    args: {
+        length: 6
+    },
+    argTypes: {
+        length: {
+            control: 'text',
+        }
+    }
+};
+export default meta;
+export const OtpInputDefault = {
+    args: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12659-13838&mode=design&t=5Wp3lAOqtDnPV63y-4',
+        },
+    }
+};
+export const OtpInputError = {
+    args: {
+        errorMessage: 'some error'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12659-13838&mode=design&t=5Wp3lAOqtDnPV63y-4',
+        },
+    }
+};
+export const OtpInputWithValue = {
+    args: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12659-13838&mode=design&t=5Wp3lAOqtDnPV63y-4',
+        },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const input = canvas.getAllByRole('textbox');
+        await step('Typing OTP', async () => {
+            await userEvent.type(input[0], '222222', { delay: 500 });
+        });
+    },
+};

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

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

package/dist/src/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/src/Inputs/PasswordField/ErrorMessages.js

@@ -0,0 +1,2 @@
+export const emptyPasswordError = 'Введите пароль';
+export const notCorrectPasswordError = 'Введите пароль не менее 6 символов';

package/dist/src/Inputs/PasswordField/PasswordField.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import _ from 'lodash/fp';
+import { useEffect, useState } from 'react';
+import { passwordValidator } from '../../tools/customValidators';
+import { TextField, } from '../TextField';
+import { emptyPasswordError, notCorrectPasswordError } from './ErrorMessages';
+export const PasswordField = (props) => {
+    const { onValidated, onPasswordInput, hidePassword = true, } = props;
+    const [errorMessage, setErrorMessage] = useState('');
+    const [touched, setTouched] = useState(false);
+    const [password, setPassword] = useState('');
+    useEffect(() => {
+        if (!touched) {
+            return;
+        }
+        onPasswordInput(password);
+        const valid = passwordValidator(password);
+        if (!valid) {
+            onValidated(false);
+            setErrorMessage(_.cond([
+                [() => !password, () => emptyPasswordError],
+                [() => !valid, () => notCorrectPasswordError],
+            ]));
+            return;
+        }
+        onValidated(true);
+        setErrorMessage('');
+    }, [
+        password,
+        onPasswordInput,
+        onValidated,
+        touched
+    ]);
+    return (_jsx(TextField, { onChange: setPassword, onTouched: setTouched, state: touched && errorMessage ? 'error' : 'idle', errorMessage: errorMessage, label: '\u041F\u0430\u0440\u043E\u043B\u044C', type: hidePassword ? 'password' : 'text', value: password, eyeIcon: true, checkIcon: true, required: true, ...props }));
+};

package/dist/src/Inputs/PasswordField/PasswordField.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ITextField } from '../index';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<ITextField>;
+export declare const PasswordFieldInactive: Story;
+export declare const PasswordFieldError: Story;
+export declare const PasswordFieldWithValue: Story;

package/dist/src/Inputs/PasswordField/PasswordField.stories.js

@@ -0,0 +1,43 @@
+import { PasswordField } from '../index';
+const meta = {
+    title: 'Inputs/PasswordField',
+    component: PasswordField,
+    tags: ['autodocs'],
+    args: {
+        onValidated: () => { },
+        onPasswordInput: () => { }
+    }
+};
+export default meta;
+export const PasswordFieldInactive = {
+    args: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-38832&mode=design&t=mI94vejMFxk5S920-4',
+        },
+    },
+};
+export const PasswordFieldError = {
+    args: {
+        state: 'error',
+        errorMessage: 'Some error'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-38856&mode=design&t=mI94vejMFxk5S920-4',
+        },
+    },
+};
+export const PasswordFieldWithValue = {
+    args: {
+        value: 'somePass',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12816-20475&mode=design&t=mI94vejMFxk5S920-4',
+        },
+    },
+};

package/dist/src/Inputs/PasswordField/index.js

@@ -0,0 +1,2 @@
+export { PasswordField } from './PasswordField';
+export { emptyPasswordError, notCorrectPasswordError } from './ErrorMessages';

package/dist/src/Inputs/PhoneField/ErrorMessages.js

@@ -0,0 +1,2 @@
+export const emptyPhoneError = 'Введите номер телефона';
+export const notCorrectPhoneError = 'Номер телефона — 10 цифр';

package/dist/src/Inputs/PhoneField/PhoneField.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import _ from 'lodash/fp';
+import { useEffect, useState } from 'react';
+import { phoneValidator } from '../../tools/customValidators';
+import { TextField } from '../TextField';
+import { emptyPhoneError, notCorrectPhoneError } from './ErrorMessages';
+export const PhoneField = (props) => {
+    const { onValidated, onTextValid } = props;
+    const [errorMessage, setErrorMessage] = useState('');
+    const [touched, setTouched] = useState(false);
+    const [phoneNumber, setPhoneNumber] = useState('');
+    const getInputNumbersValue = (value) => {
+        return value.replace(/\D/g, '');
+    };
+    const onPhoneInput = (value, e) => {
+        const { target } = e;
+        const { selectionStart } = target;
+        let inputNumbersValue = getInputNumbersValue(value);
+        let formattedInputValue = '';
+        const { data, inputType } = e.nativeEvent;
+        if (inputType === 'deleteContentBackward' && value.length === 0) {
+            setPhoneNumber('');
+            return;
+        }
+        if (value.length !== selectionStart) {
+            if (data === null || /\d/g.test(data)) {
+                setPhoneNumber(value);
+            }
+            return;
+        }
+        if (['7', '8', '9'].includes(inputNumbersValue[0])) {
+            if (inputNumbersValue[0] === '9')
+                inputNumbersValue = '7' + inputNumbersValue;
+            const firstSymbols = (inputNumbersValue[0] === '8') ? '8' : '+7';
+            formattedInputValue = firstSymbols;
+            if (inputNumbersValue.length > 1) {
+                formattedInputValue += '(' + inputNumbersValue.substring(1, 4);
+            }
+            if (inputNumbersValue.length >= 5) {
+                formattedInputValue += ')' + inputNumbersValue.substring(4, 7);
+            }
+            if (inputNumbersValue.length >= 8) {
+                formattedInputValue += '-' + inputNumbersValue.substring(7, 9);
+            }
+            if (inputNumbersValue.length >= 10) {
+                formattedInputValue += '-' + inputNumbersValue.substring(9, 11);
+            }
+        }
+        else {
+            formattedInputValue = '+' + inputNumbersValue.substring(0, 16);
+        }
+        setPhoneNumber(formattedInputValue);
+    };
+    useEffect(() => {
+        if (!touched) {
+            return;
+        }
+        const valid = phoneValidator(phoneNumber);
+        if (!valid) {
+            onValidated(false);
+            onTextValid('');
+            setErrorMessage(_.cond([
+                [_.isEmpty, () => emptyPhoneError],
+                [() => !valid, () => notCorrectPhoneError],
+                [_.stubTrue, _.stubString]
+            ]));
+            return;
+        }
+        onValidated(true);
+        onTextValid(phoneNumber.replace(/\D/g, ''));
+        setErrorMessage('');
+    }, [onTextValid, onValidated, phoneNumber, touched]);
+    return (_jsx(TextField, { onChange: onPhoneInput, onTouched: setTouched, state: touched && errorMessage ? 'error' : 'idle', errorMessage: errorMessage, label: '\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u044B\u0439 \u0442\u0435\u043B\u0435\u0444\u043E\u043D', type: 'tel', value: phoneNumber, required: true, checkIcon: true, ...props }));
+};

package/dist/src/Inputs/PhoneField/PhoneField.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ITextField } from '../TextField';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<ITextField>;
+export declare const PhoneFieldInactive: Story;
+export declare const PhoneFieldError: Story;
+export declare const PhoneFieldWithValue: Story;

package/dist/src/Inputs/PhoneField/PhoneField.stories.js

@@ -0,0 +1,43 @@
+import { PhoneField } from './PhoneField';
+const meta = {
+    title: 'Inputs/PhoneField',
+    component: PhoneField,
+    tags: ['autodocs'],
+    args: {
+        onValidated: () => { },
+        onTextValid: () => { }
+    }
+};
+export default meta;
+export const PhoneFieldInactive = {
+    args: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-37669&mode=design&t=H9AcJSW51fS3aPiW-4',
+        },
+    },
+};
+export const PhoneFieldError = {
+    args: {
+        state: 'error',
+        errorMessage: 'Some error'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-37685&mode=design&t=H9AcJSW51fS3aPiW-4',
+        },
+    },
+};
+export const PhoneFieldWithValue = {
+    args: {
+        value: '79990002211',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12786-37681&mode=design&t=H9AcJSW51fS3aPiW-4',
+        },
+    },
+};

package/dist/src/Inputs/PhoneField/index.js

@@ -0,0 +1,2 @@
+export { PhoneField } from './PhoneField';
+export { emptyPhoneError, notCorrectPhoneError } from './ErrorMessages';

package/dist/src/Inputs/RepeatPasswordField/ErrorMessages.js

@@ -0,0 +1,2 @@
+export const emptyRepeatPasswordError = 'Введите пароль повторно';
+export const notCorrectRepeatPasswordError = 'Пароли не совпадают';

package/dist/src/Inputs/RepeatPasswordField/RepeatPasswordField.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import _ from 'lodash/fp';
+import { useEffect, useState } from 'react';
+import { TextField, } from '../TextField';
+import { emptyRepeatPasswordError, notCorrectRepeatPasswordError } from './ErrorMessages';
+export const RepeatPasswordField = (props) => {
+    const { equalHandler, comparedValue } = props;
+    const [touched, setTouched] = useState(false);
+    const [password, setPassword] = useState('');
+    const [errorMessage, setErrorMessage] = useState('');
+    useEffect(() => {
+        equalHandler(comparedValue === password);
+        if (!touched) {
+            return;
+        }
+        setErrorMessage(_.cond([
+            [() => !password, () => emptyRepeatPasswordError],
+            [() => comparedValue !== password, () => notCorrectRepeatPasswordError],
+        ]));
+    }, [touched, password, comparedValue, equalHandler]);
+    return (_jsx(TextField, { onChange: setPassword, onTouched: setTouched, state: touched && errorMessage ? 'error' : 'idle', errorMessage: errorMessage, label: '\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u0435 \u043F\u0430\u0440\u043E\u043B\u044C', type: 'password', value: password, eyeIcon: true, checkIcon: true, required: true, ...props }));
+};