kamotive_ui 1.2.3 → 1.2.4

package/dist/components/Dropdown/Dropdown.js

@@ -84,10 +84,11 @@ export const DropdownListItem = ({ item, getOptionLabel, size = 'md', selectedIt
         })))));
 };
 export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOptionLabel, value, defaultValue, style = 'text', className, disabled = false, readOnly = false, isOpened = false, noOptionsText = 'Нет вариатов для выбора', isLeftLabel = false, error = false, helperText, onChange, onClose, clearable = true, required = false, isDivider = false, }) => {
+    var _a;
     const [isOpen, setIsOpen] = useState(isOpened);
     const [modifiedOptions, setModifiedOptions] = useState([]);
     const [selectedItem, setSelectedItem] = useState(null);
-    const [errorInput, setErrorInput] = useState(error);
+    const [errorInput, setErrorInput] = useState(false);
     const [errorInputHelperText, setErrorInputHelperText] = useState(helperText);
     const [activeIndex, setActiveIndex] = useState(-1);
     const containerRef = useRef(null);
@@ -154,6 +155,8 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
     };
     //для сброса выбранного значения
     const handleReset = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
         const startValue = defaultValue
             ? checkItem(defaultValue)
             : null;
@@ -189,7 +192,7 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
     });
     const selectedItemClassess = classNames({
         [styles['item-selected']]: selectedItem,
-        [styles['item-placeholder']]: !selectedItem && (placeholder !== null && placeholder !== void 0 ? placeholder : label),
+        [styles['item-placeholder']]: !selectedItem && ((placeholder !== null && placeholder !== void 0 ? placeholder : label) || (!placeholder && !label)),
         [styles['button--icons--item-selected']]: style === 'icons' && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon),
     });
     const getDropdownMenu = () => {
@@ -248,7 +251,13 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
                     : null;
             setSelectedItem(startValue !== null && startValue !== void 0 ? startValue : null);
         }
+        else {
+            setSelectedItem(null);
+        }
     }, [value, defaultValue, checkItem]);
+    useEffect(() => {
+        setErrorInput(error);
+    }, [error]);
     return (React.createElement("div", { id: id, className: wrapperClassess, ref: containerRef, style: { width: isLeftLabel && containerWidth ? `${containerWidth}px` : '100%' } },
         label && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, label)),
         React.createElement("button", { className: buttonClassess, onClick: readOnly ? undefined : handleToggle, disabled: disabled, tabIndex: 0, onKeyDown: handleKeyDown },
@@ -258,7 +267,7 @@ export const Dropdown = ({ id, label, placeholder, size = 'lg', options, getOpti
                     React.cloneElement(selectedItem.icon, {
                         strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
                     }),
-                selectedItem ? selectedItem.value : (placeholder !== null && placeholder !== void 0 ? placeholder : label)),
+                selectedItem ? selectedItem.value : ((_a = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _a !== void 0 ? _a : 'Выберите значение')),
             clearable && !readOnly && !disabled && selectedItem && (React.createElement("div", { className: styles.resetButton },
                 React.createElement(IconClose10, { strokeWidth: "0.2", htmlColor: "var(--text-light)", onClick: handleReset }))),
             React.createElement("div", { className: styles.dropdownIcon }, !isOpen ? (React.createElement(ChevronDown10, { strokeWidth: size === 'lg' ? '0.5' : '0.3' })) : (React.createElement(ChevronUp10, { strokeWidth: size === 'lg' ? '0.5' : '0.3' }))),

package/dist/components/FileAttach/FileAttach.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { FileAttachProps } from '../../types';
+export declare const FileAttach: FC<FileAttachProps>;

package/dist/components/FileAttach/FileAttach.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import styles from './FileAttach.module.css';
+import { Typography } from '../Typography/Typography';
+import { IconUpload } from '../../Icons';
+import { Loader } from '../Loader/Loader';
+export const FileAttach = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats = {
+    'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
+    'application/pdf': ['.pdf'],
+    'application/msword': ['.doc', '.docx'],
+}, addedFiles, setAddedFiles, disabled = false, }) => {
+    const [errorFiles, setErrorFiles] = useState([]);
+    const fileValidator = (file) => {
+        if (file.size > maxFileSize * 1024 * 1024 * 1024) {
+            return {
+                code: 'name-too-large',
+                message: `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`,
+            };
+        }
+        if (addedFiles.find((addedFile) => addedFile.name === file.name)) {
+            return {
+                code: 'repeating-file-name',
+                message: `Файл уже добавлен`,
+            };
+        }
+        if (addedFiles.length > maxFileCount - 1) {
+            return {
+                code: 'files-count-too-large',
+                message: `Максимальное количество файлов ${maxFileCount}`,
+            };
+        }
+        return null;
+    };
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop: (acceptedFiles, fileRejections) => {
+            setAddedFiles([...addedFiles, ...acceptedFiles]);
+            setErrorFiles([...errorFiles, ...fileRejections]);
+        },
+        validator: fileValidator,
+        accept: acceptedFormats,
+        maxFiles: maxFileCount,
+        disabled: disabled,
+    });
+    const acceptedFileItems = addedFiles.map((file, index) => (React.createElement(Loader, { name: file.name, size: file.size, onClick: () => deleteAcceptedFile(addedFiles, setAddedFiles, file.name), key: index })));
+    const fileRejectionItems = errorFiles.map(({ file, errors }) => (React.createElement(Loader, { name: file.name, size: file.size, error: errors[0].message, onClick: () => deleteRejectedFile(errorFiles, setErrorFiles, file.name), key: file.path })));
+    const deleteAcceptedFile = (addedFiles, setAddedFiles, fileName) => {
+        setAddedFiles(addedFiles.filter((file) => file.name !== fileName));
+    };
+    const deleteRejectedFile = (errorFiles, setErrorFiles, fileName) => {
+        setErrorFiles(errorFiles.filter(({ file }) => file.name !== fileName));
+    };
+    // Функция для получения всех доступных форматов в виде строки
+    const getAcceptedFormatsString = (acceptedFormats) => {
+        const formats = [];
+        for (const key in acceptedFormats) {
+            if (acceptedFormats.hasOwnProperty(key)) {
+                formats.push(...acceptedFormats[key].map(format => format.replace('.', '')));
+            }
+        }
+        return formats.join(', ');
+    };
+    return (React.createElement("section", { className: styles['fileAttach'] },
+        React.createElement("div", Object.assign({}, getRootProps({ className: `${styles['dropzone']} ${disabled ? styles['disabled'] : ''}` })),
+            React.createElement("input", Object.assign({}, getInputProps())),
+            React.createElement(IconUpload, { htmlColor: disabled ? 'var(--grey-medium)' : 'var(--icons-grey)' }),
+            React.createElement(Typography, { variant: "Body2-Medium", color: disabled ? 'var(--grey-medium)' : 'var(--text-dark)' },
+                React.createElement("span", { style: { textDecoration: 'underline' } }, "\u041D\u0430\u0436\u043C\u0438\u0442\u0435 \u043D\u0430 \u043E\u0431\u043B\u0430\u0441\u0442\u044C"),
+                React.createElement("span", null, " \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B")),
+            React.createElement("div", null,
+                maxFileSize && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" },
+                    `Максимальный размер файла ${maxFileSize.toFixed(0)} ГБ`,
+                    " ",
+                    React.createElement("br", null))),
+                maxFileCount && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, `За раз можно загрузить ${maxFileCount} ${maxFileCount > 1 ? `файлов` : `файл`}`)))),
+        acceptedFormats && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, `Поддерживаемые форматы: ${getAcceptedFormatsString(acceptedFormats)}`)),
+        (addedFiles === null || addedFiles === void 0 ? void 0 : addedFiles.length) > 0 || (errorFiles === null || errorFiles === void 0 ? void 0 : errorFiles.length) > 0 ? (React.createElement("div", { className: styles['addedFiles'] },
+            acceptedFileItems,
+            fileRejectionItems)) : (React.createElement(Typography, { variant: "Body2-Medium", color: "var(--text-dark)" }, "\u0424\u0430\u0439\u043B\u044B \u043D\u0435 \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u044B"))));
+};

package/dist/components/FileAttach/FileAttach.module.css

@@ -0,0 +1,36 @@
+.fileAttach {
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    gap: 10px; 
+}
+
+.dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    gap: 10px; 
+    padding: 30px 20px;
+    border: 1px dashed var(--blue-main);
+    border-radius: 15px;
+    cursor: pointer;
+  }
+
+  .dropzone:hover {
+    background-color: var(--fills-active);
+  }
+
+  .dropzone.disabled {
+    background-color: var(--fills-disabled);
+    border-color: var(--grey-medium);
+    cursor: not-allowed;
+  }
+
+  .addedFiles {
+    display: flex;
+    flex-direction: column;
+    gap: 10px; 
+    overflow-y: auto;
+  }

package/dist/components/Input/Input.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 ;
 import styles from './Input.module.css';
 import classNames from 'classnames';
@@ -7,9 +7,19 @@ import { Typography } from '../Typography/Typography';
  * Компонент Input для создания текстовых полей ввода различных стилей и размеров.
  */
 export const Input = ({ id, label, placeholder, size = 'lg', value, className, multiline = false, rows = 4, resize = false, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, required = false, }) => {
+    const [inputLabel, setInputLabel] = useState(label);
     const handleChange = (event) => {
         event.stopPropagation();
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        if (label) {
+            setInputLabel(label);
+        }
+        else if (placeholder && event.target.value) {
+            setInputLabel(placeholder);
+        }
+        else {
+            setInputLabel('');
+        }
     };
     const wrapperClassess = classNames(styles['wrapper--input'], {
         [styles['wrapper--left']]: isLeftLabel,
@@ -31,7 +41,7 @@ export const Input = ({ id, label, placeholder, size = 'lg', value, className, m
         [styles['label--required']]: required,
     });
     return (React.createElement("div", { className: wrapperClassess },
-        label && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, label)),
+        inputLabel && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, inputLabel)),
         icon && React.createElement("div", { className: styles.icon }, icon),
         multiline ? (React.createElement("textarea", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled, style: { height: `${rows * 20}px` } })) : (React.createElement("input", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled, readOnly: readOnly })),
         error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]) }, helperText))));

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { LoaderProps } from '../../types';
+export declare const Loader: FC<LoaderProps>;

package/dist/components/Loader/Loader.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './Loader.module.css';
+import { Typography } from '../Typography/Typography';
+import { IconFile } from '../../Icons/IconFile/IconFile';
+import { ProgressBar } from '../ProgressBar/ProgressBar';
+export const Loader = ({ name, size = 0, loading = false, error = '', onClick }) => {
+    return (React.createElement("div", { className: `${styles['loader']} ${error ? styles['error'] : ''}` },
+        React.createElement("div", { className: styles['loaderFile'] },
+            React.createElement("div", { className: styles['loaderInfo'] },
+                React.createElement("div", { className: styles['loaderIcon'] },
+                    React.createElement(IconFile, { htmlColor: "var(--icons-grey)" })),
+                React.createElement("div", { className: styles['loaderName'] },
+                    React.createElement(Typography, { variant: "Body2-Medium", color: "var(--text-dark)" }, name),
+                    size !== 0 && React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, `${(size / (1024)).toFixed(1)} кБ`))),
+            React.createElement("button", { type: "button", "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", title: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0444\u0430\u0439\u043B", onClick: onClick })),
+        loading && React.createElement(ProgressBar, { animated: true, size: "sm", value: 100 }),
+        error && (React.createElement(Typography, { variant: "Caption", color: "var(--error-main)" }, error))));
+};

package/dist/components/Loader/Loader.module.css

@@ -0,0 +1,75 @@
+
+.loader {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    justify-content: space-between;
+    
+    padding: 10px 15px;
+    border: 1px solid var(--info-secondary);
+    border-radius: 10px;
+
+  }
+  .error {
+    border-color: var(--error-main);
+  }
+
+  .loaderFile{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 5px;
+  }
+  .loaderInfo {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    flex-grow: 1; 
+    align-items: flex-start;
+    overflow: hidden;
+}
+
+.loaderIcon {
+    flex-shrink: 0
+}
+
+.loaderName {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1; 
+    align-items: flex-start;
+    overflow: auto;
+}
+
+.loaderButton{
+    position: absolute;
+    left: 50%;
+}
+
+.loader button[aria-label="Закрыть"] {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    position: relative;
+    width: 10px;
+    height: 10px;
+    flex-shrink: 0
+}
+
+.loader button[aria-label="Закрыть"]::before,
+.loader button[aria-label="Закрыть"]::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    height: 1px;
+    width: 100%;
+    background-color: var(--icons-grey); 
+}
+
+.loader button[aria-label="Закрыть"]::after {
+    transform: translate(-50%, -50%) rotate(-45deg);
+}
+

package/dist/components/ProgressBar/ProgressBar.js

@@ -36,7 +36,7 @@ export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = tru
     }, [animated, validPercentage]);
     return (React.createElement("div", { className: styles["progress-bar--wrapper"] },
         React.createElement("progress", { id: "linear-progress", className: progressBarClasses, value: percent, max: max }),
-        React.createElement("label", { htmlFor: "progress", className: styles["progress-bar-percentage"] }, showValue && (React.createElement(Typography, { variant: "Subheading3", color: '#9CA0A7', style: { fontWeight: '300' }, className: styles["progress-bar-percentage"] },
+        React.createElement("label", { htmlFor: "progress", className: styles['progress-bar-percentage'] }, showValue && (React.createElement(Typography, { variant: "Caption", color: '#9CA0A7', style: { fontWeight: '300' }, className: styles["progress-bar-percentage"] },
             percent,
             "%")))));
 };

package/dist/components/SettingTag/SettingTag.js

@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 import { Tag } from '../Tag/Tag';
 import ColorPicker from '../ColorPicker/ColorPicker';
-;
 import styles from './SettingTag.module.css';
 export const SettingTag = ({ label, color, onChange }) => {
     const [isHovered, setIsHovered] = useState(false);
-    const colorsOptions = ['red', 'orange', 'yellow', 'green', 'purple', 'indigo', 'blue', 'teal', 'pink'];
-    return (React.createElement("div", { style: { display: 'flex', gap: '10px', flexDirection: 'row', alignItems: 'center' } },
-        React.createElement(Tag, { label: label, color: color }),
+    const [currentColor, setCurrentColor] = useState(color);
+    const colorsOptions = ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink'];
+    return (React.createElement("div", { style: { display: 'flex', gap: `${isHovered ? '5px' : '10px'}`, flexDirection: 'row', alignItems: 'center' } },
+        React.createElement(Tag, { label: label, color: currentColor, editable: true, onChange: onChange }),
         !isHovered ? (React.createElement("div", { className: styles.circle, onMouseEnter: () => setIsHovered(true), style: {
                 width: 10,
                 height: 10,
-                backgroundColor: (color === null || color === void 0 ? void 0 : color.startsWith('#')) ? color : `var(--${color})`,
-            } })) : (React.createElement(ColorPicker, { mainColor: color, onChange: onChange, recentColors: isHovered ? colorsOptions : [], setIsHovered: setIsHovered }))));
+                backgroundColor: (currentColor === null || currentColor === void 0 ? void 0 : currentColor.startsWith('#')) ? currentColor : `var(--${currentColor})`,
+            } })) : (React.createElement(ColorPicker, { mainColor: currentColor, recentColors: isHovered ? colorsOptions : [], setIsHovered: setIsHovered, onChange: onChange, onColorChange: setCurrentColor }))));
 };

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SpinnerProps } from '../../types';
+export declare const Spinner: FC<SpinnerProps>;

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './Spinner.module.css';
+;
+/**
+ * Компонент Spinner отображает индикатор загрузки.
+ */
+const spinnerSizes = { lg: 54, md: 34, sm: 24, xs: 8 };
+export const Spinner = ({ size = 'md', }) => {
+    const spinnerSize = typeof size === 'string' ? spinnerSizes[size] : size;
+    const viewBoxSize = 100;
+    const strokeWidth = size === 'lg' || size === 'md' ? 12 : 10;
+    const adjustedSize = spinnerSize + strokeWidth * 5;
+    return (React.createElement("div", { className: styles['spinner-wrapper'], style: {
+            width: adjustedSize,
+            height: adjustedSize,
+            padding: strokeWidth
+        } },
+        React.createElement("svg", { id: "spinner", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, className: styles["spinner"], fill: "none", color: 'var(--blue-main)' },
+            React.createElement("defs", null,
+                React.createElement("linearGradient", { id: "spinner-secondHalf" },
+                    React.createElement("stop", { offset: "0%", stopOpacity: "0", stopColor: "currentColor" }),
+                    React.createElement("stop", { offset: "100%", stopOpacity: "0.9", stopColor: "currentColor" })),
+                React.createElement("linearGradient", { id: "spinner-firstHalf" },
+                    React.createElement("stop", { offset: "0%", stopOpacity: "1", stopColor: "currentColor" }),
+                    React.createElement("stop", { offset: "100%", stopOpacity: "0.9", stopColor: "currentColor" }))),
+            React.createElement("g", { strokeWidth: strokeWidth, className: styles.spinnerRotate },
+                React.createElement("path", { stroke: "url(#spinner-secondHalf)", d: "M 15 50 A 35 35 0 0 1 85 50" }),
+                React.createElement("path", { stroke: "url(#spinner-firstHalf)", d: "M 85 50 A 35 35 0 0 1 15 50" }),
+                React.createElement("path", { stroke: "currentColor", strokeLinecap: "round", d: "M 15 50 A 35 35 0 0 1 15 48" })))));
+};

package/dist/components/Spinner/Spinner.module.css

@@ -0,0 +1,20 @@
+.spinner-wrapper{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* height: 100vh; */
+  /* background-color: #f5f5f5; */
+}
+.spinnerRotate {
+  transform-origin: center;
+  animation: rotate 1300ms linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/components/Tag/Tag.js

@@ -1,24 +1,84 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 ;
 import styles from './Tag.module.css';
 import classNames from 'classnames';
-export const Tag = ({ label, color = 'red', closeButton = false, onClick }) => {
-    const hexToRgba = (hex, alpha) => {
-        //преобразуем в rgba для заднего фона
-        const r = parseInt(hex.slice(1, 3), 16);
-        const g = parseInt(hex.slice(3, 5), 16);
-        const b = parseInt(hex.slice(5, 7), 16);
-        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+const hexToRgba = (hex, alpha) => {
+    //преобразуем в rgba для заднего фона
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+// функция для расчёта относительной яркости
+const getLuminance = (hexColor) => {
+    var _a;
+    const rgb = (_a = hexColor
+        .replace('#', '')
+        .match(/.{2}/g)) === null || _a === void 0 ? void 0 : _a.map((c) => parseInt(c, 16) / 255);
+    if (!rgb)
+        return 0;
+    const [r, g, b] = rgb.map((c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+// функция для проверки контрастности
+const getContrastRatio = (color1, color2) => {
+    const lum1 = getLuminance(color1);
+    const lum2 = getLuminance(color2);
+    return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+};
+// проверка и смену цвета текста
+const adjustTextColor = (backgroundColor) => {
+    const white = '#ffffff';
+    const black = hexToRgba('#000000', 0.4);
+    const contrastWithWhite = getContrastRatio(backgroundColor, white);
+    return contrastWithWhite < 1.5 ? black : "";
+};
+export const Tag = ({ label, color = 'red', closeButton = false, editable = 'false', onClick, onChange, }) => {
+    const [newLabel, setNewLabel] = useState(label);
+    const [width, setWidth] = useState(0);
+    const measurementDivRef = useRef(null);
+    const adjustedColor = adjustTextColor(color) || color;
+    useEffect(() => {
+        if (measurementDivRef.current) {
+            const textWidth = measurementDivRef.current.clientWidth;
+            setWidth(textWidth);
+        }
+    }, [newLabel]);
+    const handleBlur = () => {
+        if (onChange) {
+            onChange(newLabel);
+        }
     };
     return (React.createElement("span", { className: classNames(styles.tag, !color.startsWith('#') && styles[color]), style: color.startsWith('#')
             ? {
-                color: color,
-                border: `1px solid ${color}`,
+                color: adjustedColor,
+                border: `1px solid ${adjustedColor}`,
                 backgroundColor: hexToRgba(color, 0.2),
             }
             : {} },
-        label,
+        editable ? (React.createElement("div", { style: { position: "relative" } },
+            React.createElement("input", { type: "text", placeholder: label, value: newLabel, onChange: (e) => {
+                    setNewLabel(e.target.value);
+                }, onBlur: handleBlur, style: {
+                    color: (color === null || color === void 0 ? void 0 : color.startsWith('#')) ? adjustedColor : `var(--${color})`,
+                    '--placeholder-color': (color === null || color === void 0 ? void 0 : color.startsWith('#')) ? adjustedColor : `var(--${color})`,
+                    width: `${width}px`,
+                    minWidth: '25px',
+                } }),
+            React.createElement("div", { ref: measurementDivRef, style: {
+                    position: 'absolute',
+                    visibility: 'hidden',
+                    height: 0,
+                    whiteSpace: 'pre',
+                    fontSize: 'inherit',
+                    fontFamily: 'inherit',
+                    fontWeight: 'inherit',
+                    letterSpacing: 'inherit',
+                } }, newLabel || 'Item'))) : (React.createElement(React.Fragment, null,
+            " ",
+            label,
+            " ")),
         closeButton && (React.createElement("button", { type: "button", "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", style: color.startsWith('#')
-                ? { '--close-color': color }
+                ? { '--close-color': adjustedColor }
                 : { '--close-color': `var(--${color})` }, onClick: onClick }))));
 };

package/dist/components/Tag/Tag.module.css

@@ -48,6 +48,27 @@
   transform: translate(-50%, -50%) rotate(-45deg);
 }
 
+.tag input {
+  background: none;
+  border: none;
+}
+
+.tag input:hover {
+  background: none;
+  border: none;
+}
+
+.tag input:focus {
+  outline: none;
+  border: none;
+  background-color: none; 
+}
+
+.tag input::placeholder {
+  color: var(--placeholder-color);
+  opacity: 0.5;
+}
+
 .tag.red {
   color: var(--red);
   background-color: var(--redBackground);

package/dist/index.d.ts

@@ -13,5 +13,8 @@ export { Tabs as Tabs } from './components/Tabs/Tabs';
 export { Tag as Tag } from './components/Tag/Tag';
 export { ToggleButton as ToggleButton } from './components/ToggleButton/ToggleButton';
 export { Typography as Typography } from './components/Typography/Typography';
-export type { ButtonProps, InputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps } from './types';
+export { Loader as Loader } from './components/Loader/Loader';
+export { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
+export { Spinner as Spinner } from './components/Spinner/Spinner';
+export type { ButtonProps, InputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, LoaderProps, FileAttachProps, SpinnerProps } from './types';
 import './fonts.css';

package/dist/index.js

@@ -13,4 +13,7 @@ export { Tabs as Tabs } from './components/Tabs/Tabs';
 export { Tag as Tag } from './components/Tag/Tag';
 export { ToggleButton as ToggleButton } from './components/ToggleButton/ToggleButton';
 export { Typography as Typography } from './components/Typography/Typography';
+export { Loader as Loader } from './components/Loader/Loader';
+export { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
+export { Spinner as Spinner } from './components/Spinner/Spinner';
 import './fonts.css';