torgbox-ui 1.0.11 → 1.0.13

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

@@ -1,54 +0,0 @@
-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/esm/Inputs/NameField/index.d.ts

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

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

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

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

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

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

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

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

@@ -1,78 +0,0 @@
-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/esm/Inputs/OtpInput/index.d.ts

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

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

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

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

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

@@ -1,2 +0,0 @@
-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";

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

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

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

@@ -1,7 +0,0 @@
-import { type ITextField, type THTMLInput } from '../TextField';
-export interface IPasswordField extends THTMLInput, Pick<ITextField, 'onVisibilityToggle'> {
-    onValidated: (state: boolean) => void;
-    onPasswordInput: (value: string) => void;
-    hidePassword?: boolean;
-}
-export declare const PasswordField: (props: IPasswordField) => JSX.Element;

package/dist/esm/Inputs/PasswordField/PasswordField.js

@@ -1,35 +0,0 @@
-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/esm/Inputs/PasswordField/index.d.ts

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

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

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

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

@@ -1,2 +0,0 @@
-export declare const emptyPhoneError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430";
-export declare const notCorrectPhoneError = "\u041D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u2014 10 \u0446\u0438\u0444\u0440";

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

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

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

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

package/dist/esm/Inputs/PhoneField/PhoneField.js

@@ -1,74 +0,0 @@
-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/esm/Inputs/PhoneField/index.d.ts

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

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

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

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

@@ -1,2 +0,0 @@
-export declare const emptyRepeatPasswordError = "\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043F\u0430\u0440\u043E\u043B\u044C \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u043E";
-export declare const notCorrectRepeatPasswordError = "\u041F\u0430\u0440\u043E\u043B\u0438 \u043D\u0435 \u0441\u043E\u0432\u043F\u0430\u0434\u0430\u044E\u0442";

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

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

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

@@ -1,6 +0,0 @@
-import { type ITextField, type THTMLInput } from '../TextField';
-export interface IRepeatPasswordField extends THTMLInput, Pick<ITextField, 'onVisibilityToggle'> {
-    equalHandler: (state: boolean) => void;
-    comparedValue: string;
-}
-export declare const RepeatPasswordField: (props: IRepeatPasswordField) => JSX.Element;

package/dist/esm/Inputs/RepeatPasswordField/RepeatPasswordField.js

@@ -1,22 +0,0 @@
-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 }));
-};

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

@@ -1,2 +0,0 @@
-export { RepeatPasswordField } from './RepeatPasswordField';
-export { emptyRepeatPasswordError, notCorrectRepeatPasswordError, } from './ErrorMessages';

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

@@ -1,2 +0,0 @@
-export { RepeatPasswordField } from './RepeatPasswordField';
-export { emptyRepeatPasswordError, notCorrectRepeatPasswordError, } from './ErrorMessages';

package/dist/esm/Inputs/Selector/Collapse.d.ts

@@ -1,12 +0,0 @@
-import { type ReactNode } from 'react';
-import { type IOptionItem } from './Option/Option';
-export interface ICollapse {
-    options: IOptionItem[];
-    selected?: IOptionItem;
-    title?: ReactNode;
-    onSelect: (selected: IOptionItem['value']) => void;
-    chevron?: boolean;
-    optionsIcon?: ReactNode;
-    closeOnClick?: boolean;
-}
-export declare const Collapse: (props: ICollapse) => JSX.Element;

package/dist/esm/Inputs/Selector/Collapse.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
-import { useRef, useState, useEffect } from 'react';
-import ChevronDown from '../../assets/img/chevron-down.svg';
-import { Option } from './Option/Option';
-export const Collapse = (props) => {
-    const { options, selected, title, onSelect, chevron = true, optionsIcon, closeOnClick = true, } = props;
-    const [isOpen, setIsOpen] = useState(false);
-    const rootRef = useRef(null);
-    const titleRef = useRef(null);
-    useEffect(() => {
-        const handleClick = (event) => {
-            const { target } = event;
-            if (target instanceof Node &&
-                rootRef.current &&
-                !rootRef.current.contains(target)) {
-                closeOnClick && setIsOpen(false);
-            }
-        };
-        window.addEventListener('click', handleClick);
-        return () => {
-            window.removeEventListener('click', handleClick);
-        };
-    }, [closeOnClick, isOpen]);
-    const handleOptionClick = (value) => {
-        closeOnClick && setIsOpen(false);
-        onSelect(value);
-    };
-    const handleTitleClick = () => {
-        setIsOpen(!isOpen);
-    };
-    const chevronMods = [
-        'title__chevron',
-        isOpen && 'title__chevron--rotate',
-    ];
-    const optionsBlock = (_jsx("div", { className: 'selector__options selector__options--slide-down', children: options.map((option) => (_jsx(Option, { option: option, onClick: handleOptionClick, optionsIcon: optionsIcon, selected: option.value === selected?.value }, option.value))) }));
-    const hasIcon = optionsIcon !== undefined || selected?.icon !== undefined;
-    const label = selected ? (_jsxs("div", { className: 'title__label', children: [hasIcon && (_jsx("div", { className: 'title__icon', children: selected?.icon ?? optionsIcon })), selected.label] })) : title;
-    return (_jsxs("div", { className: 'selector', ref: rootRef, children: [_jsxs("div", { className: cn('title', isOpen && 'title--active'), onClick: handleTitleClick, ref: titleRef, children: [label, chevron && (_jsx("div", { className: cn(chevronMods), children: _jsx(ChevronDown, {}) }))] }), isOpen && optionsBlock] }));
-};

package/dist/esm/Inputs/Selector/Dropdown.d.ts

@@ -1,13 +0,0 @@
-import { type ReactNode } from 'react';
-import { type IOptionItem } from './Option/Option';
-export interface IDropdown {
-    options: IOptionItem[];
-    selected?: IOptionItem;
-    title?: ReactNode;
-    onSelect: (selected: IOptionItem['value']) => void;
-    optionsIcon?: ReactNode;
-    optionsDirection?: 'up' | 'down';
-    noFlip?: boolean;
-    optionsMaxHeight?: number;
-}
-export declare const Dropdown: (props: IDropdown) => JSX.Element;

package/dist/esm/Inputs/Selector/Dropdown.js

@@ -1,81 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
-import { useRef, useState, useEffect } from 'react';
-import { getCoords } from '../../tools/getCoords';
-import { Portal } from '../../Utils';
-import { Option } from './Option/Option';
-export const Dropdown = (props) => {
-    const { options, selected, title, onSelect, optionsIcon, optionsMaxHeight, optionsDirection = 'down', noFlip = false, } = props;
-    const [isOpen, setIsOpen] = useState(false);
-    const [direction, setDirection] = useState(optionsDirection);
-    const [maxHeight, setMaxHeight] = useState(optionsMaxHeight);
-    const rootRef = useRef(null);
-    const titleRef = useRef(null);
-    const optionsRef = useRef(null);
-    const titleCoords = getCoords(titleRef);
-    useEffect(() => {
-        const handleClick = (event) => {
-            const { target } = event;
-            if (target instanceof Node &&
-                rootRef.current &&
-                !rootRef.current.contains(target)) {
-                setIsOpen(false);
-            }
-        };
-        window.addEventListener('click', handleClick);
-        return () => {
-            window.removeEventListener('click', handleClick);
-        };
-    }, [isOpen]);
-    useEffect(() => {
-        if (!optionsRef.current || !titleCoords) {
-            return;
-        }
-        const { topViewport: distanceToTop, bottomViewport } = titleCoords;
-        const windowHeight = window.innerHeight;
-        const optionsHeight = optionsRef.current.offsetHeight;
-        const distanceToBottom = windowHeight - bottomViewport;
-        const isDownDirection = optionsDirection === 'down';
-        setDirection(optionsDirection);
-        setMaxHeight(isDownDirection ? distanceToBottom : distanceToTop);
-        if (noFlip) {
-            return;
-        }
-        const hasSpaceToOptionsBelow = distanceToBottom - optionsHeight > 0;
-        const hasSpaceToOptionsAbove = distanceToTop - optionsHeight > 0;
-        const oppositeDirection = isDownDirection ? 'up' : 'down';
-        if (isDownDirection &&
-            !hasSpaceToOptionsBelow &&
-            hasSpaceToOptionsAbove) {
-            setDirection(oppositeDirection);
-            setMaxHeight(distanceToTop);
-            return;
-        }
-        if (!isDownDirection &&
-            !hasSpaceToOptionsAbove &&
-            hasSpaceToOptionsBelow) {
-            setDirection(oppositeDirection);
-            setMaxHeight(distanceToBottom);
-        }
-    }, [isOpen, noFlip, optionsDirection, titleCoords]);
-    const handleOptionClick = (value) => {
-        setIsOpen(false);
-        onSelect(value);
-    };
-    const handleTitleClick = () => {
-        setIsOpen(!isOpen);
-    };
-    const optionsPosition = {
-        position: 'absolute',
-        left: `${titleCoords?.leftDocument ?? 0}px`,
-        minWidth: `${titleCoords?.width ?? 0}px`,
-        maxHeight: `${optionsMaxHeight ?? maxHeight}px`,
-        ...(direction === 'down'
-            ? { top: `${titleCoords?.bottomDocument ?? 0}px` }
-            : { bottom: `${window?.innerHeight - (titleCoords?.topDocument ?? 0)}px` }),
-    };
-    const optionsBlock = titleCoords && (_jsx("div", { className: `selector__options selector__options--slide-${direction}`, style: { ...optionsPosition }, ref: optionsRef, children: options.map((option) => (_jsx(Option, { option: option, onClick: handleOptionClick, optionsIcon: optionsIcon, selected: option.value === selected?.value }, option.value))) }));
-    const hasIcon = optionsIcon !== undefined || selected?.icon !== undefined;
-    const label = selected ? (_jsxs("div", { className: 'title__label', children: [hasIcon && (_jsx("div", { className: 'title__icon', children: selected?.icon ?? optionsIcon })), selected.label] })) : title;
-    return (_jsxs("div", { className: 'selector', ref: rootRef, children: [_jsx("div", { className: cn('title', isOpen && 'title--active'), onClick: handleTitleClick, ref: titleRef, children: label }), isOpen && _jsx(Portal, { children: optionsBlock })] }));
-};

package/dist/esm/Inputs/Selector/Option/Option.d.ts

@@ -1,13 +0,0 @@
-import type { ReactNode } from 'react';
-export interface IOptionItem {
-    label: string;
-    value: string;
-    icon?: ReactNode;
-}
-export interface IOption {
-    option: IOptionItem;
-    onClick: (value: IOptionItem['value']) => void;
-    selected?: boolean;
-    optionsIcon?: ReactNode;
-}
-export declare const Option: (props: IOption) => JSX.Element;

package/dist/esm/Inputs/Selector/Option/Option.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
-export const Option = (props) => {
-    const { option: { value, label, icon }, onClick, selected = false, optionsIcon, } = props;
-    const handleClick = (clickedValue) => () => {
-        onClick(clickedValue);
-    };
-    const hasIcon = optionsIcon !== undefined || icon !== undefined;
-    return (_jsxs("div", { className: cn('selector-option', selected && 'selector-option--selected'), onClick: handleClick(value), children: [hasIcon && (_jsx("div", { className: 'selector-option__icon', children: icon ?? optionsIcon })), label] }));
-};

package/dist/esm/Inputs/Selector/Option/option.scss

@@ -1,44 +0,0 @@
-$option-bg:            $color-neutral-gray;
-$option-bg-hover:      $neutral-A8;
-$option-bg-selected:   $primary-A12;
-$option-text:          $neutral-high;
-$option-text-selected: $primary-high;
-$option-icon:          $neutral-high;
-$option-icon-selected: $primary-high;
-
-.selector-option {
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-
-  padding: 8px 12px;
-
-  color: $option-text;
-
-  background: $option-bg;
-  border-radius: 4px;
-
-  fill: $option-icon;
-
-  &:hover {
-    background: $option-bg-hover;
-    transition: background-color 0.2s;
-  }
-
-  &--selected {
-    color:      $option-text-selected;
-    background: $option-bg-selected;
-    fill:       $option-icon-selected;
-
-    &:hover {
-      background: $option-bg-selected;
-    }
-  }
-
-  &__icon {
-    display: flex;
-    width: 20px;
-    padding-right: 8px;
-  }
-}

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

@@ -1,3 +0,0 @@
-export { Option, type IOptionItem, type IOption, } from './Option/Option';
-export { Collapse, type ICollapse } from './Collapse';
-export { Dropdown, type IDropdown } from './Dropdown';