kamotive_ui 1.2.14 → 1.2.15

package/dist/Icons/IconAdd/IconAdd.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export declare const IconAdd: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: string;
+}>;

package/dist/Icons/IconAdd/IconAdd.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconAdd = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M5,13V12H11V6H12V12H18V13H12V19H11V13H5Z" })));
+};

package/dist/Icons/index.d.ts

@@ -19,3 +19,4 @@ export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
 export { IconFile } from './IconFile/IconFile';
 export { IconUpload } from './IconUpload/IconUpload';
 export { IconDownload } from './IconDownload/IconDownload';
+export { IconAdd } from './IconAdd/IconAdd';

package/dist/Icons/index.js

@@ -19,3 +19,4 @@ export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
 export { IconFile } from './IconFile/IconFile';
 export { IconUpload } from './IconUpload/IconUpload';
 export { IconDownload } from './IconDownload/IconDownload';
+export { IconAdd } from './IconAdd/IconAdd';

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,66 @@
+import { ChangeEventHandler } from 'react';
+import type { Meta } from '@storybook/react';
+export interface CheckboxProps {
+    /** Идентификатор */
+    checked?: boolean;
+    /** Обработчик изменения состояния */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** Заблокированный чекбокс */
+    disabled?: boolean;
+    /** Размер чекбокса */
+    size?: 'sm' | 'md';
+    /** Текст лейбла */
+    label?: string;
+}
+declare const meta: Meta<CheckboxProps>;
+export default meta;
+export declare const CheckboxOff: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+};
+export declare const CheckboxLabel: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        label: string;
+    };
+};
+export declare const CheckboxChecked: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        checked: boolean;
+        disabled: boolean;
+    };
+};
+export declare const CheckboxDisabled: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        checked: boolean;
+        disabled: boolean;
+    };
+};
+export declare const CheckboxCheckedDisabled: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        checked: boolean;
+        disabled: boolean;
+    };
+};
+export declare const CheckboxCustomColor: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        color: string;
+    };
+};
+export declare const CheckboxCustomColorFilled: {
+    (argTypes: CheckboxProps): JSX.Element;
+    storyName: string;
+    args: {
+        color: string;
+        filled: boolean;
+    };
+};

package/dist/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Checkbox } from './Checkbox';
+const meta = {
+    component: Checkbox,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (React.createElement("div", { style: {
+                backgroundColor: 'var(--white)',
+                padding: '30px',
+                borderRadius: '10px',
+                width: '900px'
+            } },
+            React.createElement(Story, null))),
+    ],
+    args: {
+        size: 'sm',
+        disabled: false,
+    },
+    argTypes: {
+        size: {
+            description: 'Свойство, позволяющее регулировать размер чекбокса',
+            control: { type: 'radio' },
+            options: ['sm', 'md'],
+        },
+        disabled: { description: 'Устанавливает атрибут disabled', control: { type: 'boolean' } },
+        checked: { description: 'Задаёт включённое состояние для компонента' },
+        label: { description: 'Текст лейбла чекбокса', type: 'string' },
+    },
+};
+export default meta;
+export const CheckboxOff = (argTypes) => {
+    const [checked, setChecked] = useState(false);
+    const handleChange = () => {
+        setChecked(prev => !prev);
+    };
+    return (React.createElement(Checkbox, Object.assign({ checked: checked, onChange: handleChange }, argTypes)));
+};
+CheckboxOff.storyName = 'Checkbox по умолчанию';
+export const CheckboxLabel = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxLabel.storyName = 'Checkbox c label';
+CheckboxLabel.args = {
+    label: 'Чекбокс',
+};
+export const CheckboxChecked = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxChecked.storyName = 'Checkbox выбран';
+CheckboxChecked.args = {
+    checked: true,
+    disabled: false,
+};
+export const CheckboxDisabled = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxDisabled.storyName = 'Checkbox заблокирован';
+CheckboxDisabled.args = {
+    checked: false,
+    disabled: true,
+};
+export const CheckboxCheckedDisabled = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxCheckedDisabled.storyName = 'Checkbox выбран и заблокирован';
+CheckboxCheckedDisabled.args = {
+    checked: true,
+    disabled: true,
+};
+export const CheckboxCustomColor = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxCustomColor.storyName = 'Checkbox с кастомным цветом';
+CheckboxCustomColor.args = {
+    color: 'red',
+};
+export const CheckboxCustomColorFilled = (argTypes) => React.createElement(Checkbox, Object.assign({}, argTypes));
+CheckboxCustomColorFilled.storyName = 'Checkbox с кастомным цветом заполненный';
+CheckboxCustomColorFilled.args = {
+    color: 'red',
+    filled: true,
+};

package/dist/components/FileItem/FileItem.js

@@ -4,14 +4,14 @@ import { Typography } from '../Typography/Typography';
 import { ProgressBar } from '../ProgressBar/ProgressBar';
 import { IconButton } from '../IconButton/IconButton';
 import { IconClose10, IconDownload, IconFile } from '../../Icons';
-export const FileItem = ({ name, size = 0, loading = false, error = '', onDownload, onDelete }) => {
-    return (React.createElement("div", { className: `${styles['fileItem']} ${error ? styles['error'] : ''}` },
+export const FileItem = ({ name, size = 0, loading = false, error = '', onDownload, onDelete, style }) => {
+    return (React.createElement("div", { className: `${styles['fileItem']} ${error ? styles['error'] : ''}`, style: style },
         React.createElement("div", { className: styles['fileItemFile'] },
             React.createElement("div", { className: styles['fileItemInfo'] },
                 React.createElement("div", { className: styles['fileItemIcon'] },
                     React.createElement(IconFile, { htmlColor: 'var(--icons-grey)' })),
                 React.createElement("div", { className: styles['fileItemName'] },
-                    React.createElement(Typography, { variant: "Body1-Medium", color: "var(--text-dark)" }, name),
+                    React.createElement(Typography, { variant: "Body1", color: "var(--text-dark)" }, name),
                     size !== 0 && (React.createElement(Typography, { variant: "Caption", color: "var(--grey-medium)" }, `${(size / 1024).toFixed(1)} кБ`)))),
             onDownload && (React.createElement(IconButton, { icon: React.createElement(IconDownload, null), onClick: onDownload, color: 'var(--icons-grey)', className: styles['fileIcon'] })),
             onDelete && (React.createElement(IconButton, { icon: React.createElement(IconClose10, null), onClick: onDelete, color: 'var(--icons-grey)' }))),

package/dist/components/IconButton/IconButton.js

@@ -2,8 +2,10 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './IconButton.module.css';
 export const IconButton = ({ icon, size = 'md', color, style, disabled = false, onClick, children, className }) => {
-    return (React.createElement("button", { className: classNames(styles['iconButton'], styles[`iconButton--${size}`], className), disabled: disabled, "aria-disabled": disabled, type: "button", onClick: onClick, style: style }, (icon || (typeof children === 'object' && children)) &&
-        React.cloneElement(icon, {
+    const validChildren = React.Children.toArray(children).filter(child => React.isValidElement(child));
+    const renderIcon = icon || validChildren[0];
+    return (React.createElement("button", { className: classNames(styles['iconButton'], styles[`iconButton--${size}`], className), disabled: disabled, "aria-disabled": disabled, type: "button", onClick: onClick, style: style }, (renderIcon) &&
+        React.cloneElement(renderIcon, {
             htmlColor: color,
             strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
         })));

package/dist/components/List/List.js

@@ -5,8 +5,8 @@ import { Typography } from '../Typography/Typography';
 import { Checkbox } from '../Checkbox/Checkbox';
 import { RadioButton } from '../RadioButton/RadioButton';
 import { ChevronDown10 } from '../../Icons';
-export const List = ({ onClick, onCheck, onRadioSelect, checked = false, selected = false, disabled = false, label, id, collapsible = false, withCheckbox = false, checkboxColor, checkboxFilled, withRadioButton = false, customBullet, customItemBullet, bulletClassName, children, isHeader = false, parentChecked = false, }) => {
-    const [isOpen, setIsOpen] = useState(false);
+export const List = ({ onClick, onCheck, onRadioSelect, checked = false, selected = false, disabled = false, label, id, style, className, collapsible = false, open = false, withCheckbox = false, checkboxColor, checkboxFilled, withRadioButton = false, customBullet, customItemBullet, bulletClassName, children, isHeader = false, parentChecked = false, }) => {
+    const [isOpen, setIsOpen] = useState(open);
     const [isChecked, setIsChecked] = useState(checked || parentChecked);
     const childIds = [];
     React.Children.forEach(children, (child) => {
@@ -54,10 +54,10 @@ export const List = ({ onClick, onCheck, onRadioSelect, checked = false, selecte
     useEffect(() => {
         setIsChecked(parentChecked || checked);
     }, [parentChecked, checked]);
-    const headerClassNames = classNames(styles.header);
+    const headerClassNames = classNames(styles.header, className);
     const contentClassNames = classNames(styles.content, isOpen ? styles['content--expanded'] : styles['content--collapsed']);
     return (React.createElement("div", { className: styles.collapsibleList },
-        label && (React.createElement("div", { className: headerClassNames, onClick: handleClick },
+        label && (React.createElement("div", { className: headerClassNames, onClick: handleClick, style: style },
             !isHeader && (React.createElement("div", null,
                 withCheckbox && (React.createElement("span", { onClick: handleCheckboxClick },
                     React.createElement(Checkbox, { checked: isChecked, color: checkboxColor, filled: checkboxFilled, disabled: disabled }))),
@@ -82,6 +82,8 @@ export const List = ({ onClick, onCheck, onRadioSelect, checked = false, selecte
                     onRadioSelect: handleChildRadioSelect,
                     parentChecked: isChecked,
                     selected: child.props.selected,
+                    style: child.props.style || style,
+                    className: child.props.className,
                 });
             }
             return child;

package/dist/components/Tag/Tag.d.ts

@@ -1,3 +1,4 @@
 import { FC } from 'react';
 import { TagProps } from '../../types';
+export declare const hexToRgba: (hex: string, alpha: number) => string;
 export declare const Tag: FC<TagProps>;

package/dist/components/Tag/Tag.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 ;
 import styles from './Tag.module.css';
 import classNames from 'classnames';
-const hexToRgba = (hex, alpha) => {
+export const hexToRgba = (hex, alpha) => {
     //преобразуем в rgba для заднего фона
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);

package/dist/components/Tooltip/Tooltip.d.ts

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

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,198 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './Tooltip.module.css';
+import { Typography } from '../Typography/Typography';
+import classNames from 'classnames';
+import ReactDOM from 'react-dom';
+import { hexToRgba } from '../Tag/Tag';
+export const Tooltip = ({ label, children, className, style, overlayChildren = false, textSize = 'sm', position = 'none', displayDelay = 750, hideDelay = 500, opacity = 0.4, color, followCursor = false, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isVisible, setIsVisible] = useState(false);
+    const [coords, setCoords] = useState({ x: 0, y: 0 });
+    const [childrenRect, setChildrenRect] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+        contentX: 0,
+        contentY: 0,
+        contentWidth: 0,
+        contentHeight: 0,
+    });
+    const timeoutRef = useRef(null);
+    const mousePositionRef = useRef({ x: 0, y: 0 });
+    const childrenRef = useRef(null);
+    const tooltipElementRef = useRef(null);
+    const updateContainerRect = () => {
+        if (childrenRef.current) {
+            const childElement = childrenRef.current.firstElementChild;
+            const rect = childElement.getBoundingClientRect();
+            const computedStyle = window.getComputedStyle(childElement);
+            const paddingTop = parseFloat(computedStyle.paddingTop);
+            const paddingBottom = parseFloat(computedStyle.paddingBottom);
+            const paddingLeft = parseFloat(computedStyle.paddingLeft);
+            const paddingRight = parseFloat(computedStyle.paddingRight);
+            const contentX = rect.left + paddingLeft;
+            const contentY = rect.top + paddingTop;
+            const contentHeight = rect.height - paddingTop - paddingBottom;
+            const contentWidth = rect.width - paddingLeft - paddingRight;
+            setChildrenRect({
+                x: rect.left,
+                y: rect.top,
+                width: rect.width,
+                height: rect.height,
+                contentX: contentX,
+                contentY: contentY,
+                contentWidth: contentWidth,
+                contentHeight: contentHeight,
+            });
+        }
+    };
+    useEffect(() => {
+        updateContainerRect();
+        window.addEventListener('resize', updateContainerRect);
+        window.addEventListener('scroll', updateContainerRect);
+        return () => {
+            window.removeEventListener('resize', updateContainerRect);
+            window.removeEventListener('scroll', updateContainerRect);
+        };
+    }, []);
+    const adjustToViewPort = (posX, posY) => {
+        if (tooltipElementRef.current) {
+            const OFFSET = 15;
+            const tooltipWidth = tooltipElementRef.current.offsetWidth;
+            const tooltipHeight = tooltipElementRef.current.offsetHeight;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            if (posX + tooltipWidth > viewportWidth) {
+                posX = viewportWidth - tooltipWidth - OFFSET;
+            }
+            if (posY + tooltipHeight > viewportHeight) {
+                posY = mousePositionRef.current.y - tooltipHeight - OFFSET;
+            }
+        }
+        return [posX, posY];
+    };
+    const updateCoords = (mouseX, mouseY) => {
+        const OFFSET_X = 8;
+        const OFFSET_Y = 15;
+        const CONTENT_OFFSET_Y = 5;
+        const cursorX = mouseX !== undefined ? mouseX : mousePositionRef.current.x;
+        const cursorY = mouseY !== undefined ? mouseY : mousePositionRef.current.y;
+        // Если followCursor активен, всегда используем позицию курсора
+        if (followCursor) {
+            let posX = cursorX + OFFSET_X;
+            let posY = cursorY + OFFSET_Y;
+            // Проверяем границы экрана
+            [posX, posY] = adjustToViewPort(posX, posY);
+            setCoords({
+                x: posX,
+                y: posY
+            });
+        }
+        else {
+            // Оригинальная логика позиционирования
+            let posX = cursorX + OFFSET_X;
+            let posY = overlayChildren || cursorY > childrenRect.contentY + childrenRect.contentHeight
+                ? cursorY + OFFSET_Y
+                : childrenRect.contentY + childrenRect.contentHeight + CONTENT_OFFSET_Y;
+            if (position === 'bottom-center' || position === 'bottom-right' || position === 'bottom-left') {
+                posY = childrenRect.contentY + childrenRect.contentHeight + CONTENT_OFFSET_Y;
+            }
+            else if (position !== 'none') {
+                posY = childrenRect.contentY - childrenRect.contentHeight - CONTENT_OFFSET_Y;
+            }
+            setCoords({
+                x: posX,
+                y: posY
+            });
+        }
+        if (!isOpen) {
+            setIsOpen(true);
+            setTimeout(() => {
+                setIsVisible(true);
+            }, 10);
+        }
+        if (!followCursor) {
+            /** положение подсказки
+             * x - всегда зависит от положения курсора в момент наведения
+             * y - если пропс overlayChildren true, подсказка будет поверх дочерних компонентов в месте наведения,
+             * в ином случае подсказка всплывает под дочерним элементом
+             */
+            let posX = mousePositionRef.current.x + OFFSET_X;
+            let posY = overlayChildren || mousePositionRef.current.y > childrenRect.contentY + childrenRect.contentHeight
+                ? mousePositionRef.current.y + OFFSET_Y
+                : childrenRect.contentY + childrenRect.contentHeight + CONTENT_OFFSET_Y;
+            if (position === 'bottom-center' || position === 'bottom-right' || position === 'bottom-left') {
+                posY = childrenRect.contentY + childrenRect.contentHeight + CONTENT_OFFSET_Y;
+            }
+            else if (position !== 'none') {
+                posY = childrenRect.contentY - childrenRect.contentHeight - CONTENT_OFFSET_Y;
+            }
+            setCoords({
+                x: posX,
+                y: posY
+            });
+            setIsOpen(true);
+            setTimeout(() => {
+                setIsVisible(true);
+            }, 10);
+            setTimeout(() => {
+                if (tooltipElementRef.current) {
+                    const tooltipWidth = tooltipElementRef.current.offsetWidth;
+                    if (position === 'bottom-center' || position === 'top-center') {
+                        posX = childrenRect.x + (childrenRect.width - tooltipWidth) / 2;
+                    }
+                    else if (position === 'bottom-right' || position === 'top-right') {
+                        posX = childrenRect.contentX + childrenRect.contentWidth - tooltipWidth;
+                    }
+                    else if (position !== 'none') {
+                        posX = childrenRect.contentX;
+                    }
+                    adjustToViewPort(posX, posY);
+                    setCoords({
+                        x: posX,
+                        y: posY
+                    });
+                }
+            }, 0);
+        }
+    };
+    const handleMouseEnter = (e) => {
+        updateContainerRect();
+        mousePositionRef.current = {
+            x: e.clientX,
+            y: e.clientY,
+        };
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = window.setTimeout(() => {
+            updateCoords();
+        }, displayDelay);
+    };
+    const handleMouseLeave = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setIsVisible(false);
+        setTimeout(() => {
+            setIsOpen(false);
+        }, hideDelay);
+    };
+    const handleMouseMove = (e) => {
+        mousePositionRef.current = {
+            x: e.clientX,
+            y: e.clientY,
+        };
+        if (isOpen && followCursor) {
+            updateCoords(e.clientX, e.clientY);
+        }
+    };
+    const tooltipStyles = Object.assign(Object.assign({}, style), { position: 'fixed', left: `${coords.x}px`, top: `${coords.y}px`, backgroundColor: color ? hexToRgba(color, opacity) : `rgba(0, 0, 0, ${opacity})`, zIndex: 1000 });
+    const tooltipClassNames = classNames(styles.tooltip, isVisible && styles['tooltip--visible'], className);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, className: styles.wrapper, ref: childrenRef }, children),
+        isOpen && ReactDOM.createPortal(React.createElement("div", { ref: tooltipElementRef, className: tooltipClassNames, style: tooltipStyles },
+            React.createElement(Typography, { variant: textSize === 'sm' ? "Caption-Medium" : textSize === 'md' ? "Body2-Medium" : "Body1-Medium" }, label)), document.body)));
+};

package/dist/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,22 @@
+.tooltip {
+	backdrop-filter: blur(5px);
+	border-radius: 8px;
+	padding: 5px 8px;
+	width: fit-content;
+	font-family: var(--font-family-content);
+	color: white;
+	display: flex;
+	align-items: center;
+	pointer-events: none;
+	box-shadow: 0 4px 14.9px -3px rgba(0, 0, 0, 0.3);
+	opacity: 0;
+  	transition: opacity 0.1s ease-out;
+}
+
+.tooltip--visible {
+	opacity: 1;
+}
+
+.wrapper {
+	width: fit-content;
+}

package/dist/components/Typography/Typography.module.css

@@ -81,7 +81,7 @@
 .typography--variant-Body-Medium {
   font-family: var(--font-family-content);
   font-size: var(--font-size-16);
-  font-weight: var(--font-weight-meduim);
+  font-weight: var(--font-weight-medium);
   line-height: var(--lineHeight-16);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
@@ -161,7 +161,7 @@
 .typography--variant-Body2-Medium {
   font-family: var(--font-family-content);
   font-size: var(--font-size-12);
-  font-weight: var(--font-weight-meduim);
+  font-weight: var(--font-weight-medium);
   line-height: var(--lineHeight-12);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
@@ -184,25 +184,25 @@
 }
 .typography--variant-Caption {
   font-family: var(--font-family-content);
-  font-size: var(--font-size-12);
+  font-size: var(--font-size-10);
   font-weight: var(--font-weight-regular);
-  line-height: var(--lineHeight-12);
+  line-height: var(--lineHeight-10);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
 }
 .typography--variant-Caption-Medium {
   font-family: var(--font-family-content);
-  font-size: var(--font-size-12);
-  font-weight: var(--font-weight-meduim);
-  line-height: var(--lineHeight-12);
+  font-size: var(--font-size-10);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lineHeight-10);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
 }
 .typography--variant-Caption-Bold {
   font-family: var(--font-family-content);
-  font-size: var(--font-size-12);
+  font-size: var(--font-size-10);
   font-weight: var(--font-weight-bold);
-  line-height: var(--lineHeight-12);
+  line-height: var(--lineHeight-10);
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
 }

package/dist/index.d.ts

@@ -23,5 +23,6 @@ export { List as List } from './components/List/List';
 export { ListItem as ListItem } from './components/ListItem/ListItem';
 export { Breadcrumb as Breadcrumb } from './components/Breadcrumb/Breadcrumb';
 export { Breadcrumbs as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
-export type { ButtonProps, InputProps, DateInputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, FileItemProps, FileAttachProps, SpinnerProps, DialogProps, IconButtonProps, BaseListProps, ListProps, ListItemProps, BreadcrumbProps, BreadcrumbsProps, } from './types';
+export { Tooltip as Tooltip } from './components/Tooltip/Tooltip';
+export type { ButtonProps, InputProps, DateInputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, FileItemProps, FileAttachProps, SpinnerProps, DialogProps, IconButtonProps, BaseListProps, ListProps, ListItemProps, BreadcrumbProps, BreadcrumbsProps, TooltipProps, } from './types';
 import './fonts.css';

package/dist/index.js

@@ -23,4 +23,5 @@ export { List as List } from './components/List/List';
 export { ListItem as ListItem } from './components/ListItem/ListItem';
 export { Breadcrumb as Breadcrumb } from './components/Breadcrumb/Breadcrumb';
 export { Breadcrumbs as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
+export { Tooltip as Tooltip } from './components/Tooltip/Tooltip';
 import './fonts.css';

package/dist/types/index.d.ts

@@ -425,6 +425,10 @@ export interface IconButtonProps {
 export interface BaseListProps {
     /** Идентификатор */
     id?: string;
+    /** Стиль элемента списка */
+    style?: CSSProperties;
+    /** Дополнительный класс */
+    className?: string;
     /** Обработчик клика */
     onClick?: () => void;
     /** Обработчик выбора чекбокса */
@@ -455,10 +459,6 @@ export interface BaseListProps {
     bulletClassName?: string;
 }
 export interface ListItemProps extends BaseListProps {
-    /** Стиль элемента списка */
-    style?: CSSProperties;
-    /** Дополнительный класс */
-    className?: string;
     /** Дочерние элементы */
     children?: ReactNode;
 }
@@ -471,4 +471,32 @@ export interface ListProps extends BaseListProps {
     customItemBullet?: React.ReactNode;
     /** Внешний компонент без буллитов/чекбоксов */
     isHeader?: boolean;
+    /** Раскрытый список */
+    open?: boolean;
+}
+export interface TooltipProps {
+    /** Текст подсказки */
+    label: string;
+    /** Дочерние элементы */
+    children: React.ReactNode;
+    /** Дополнительный класс */
+    className?: string;
+    /** Стиль подсказки */
+    style?: CSSProperties;
+    /** Положение подсказки */
+    overlayChildren?: boolean;
+    /** Размер текста */
+    textSize?: 'sm' | 'md' | 'lg';
+    /** Позиция подсказки */
+    position?: 'none' | 'bottom-center' | 'bottom-right' | 'bottom-left' | 'top-center' | 'top-right' | 'top-left';
+    /** Время, через которое будет показана подсказка */
+    displayDelay?: number;
+    /** Время, через которое будет скрыта подсказка */
+    hideDelay?: number;
+    /** Прозрачность подсказки (значение от 0 до 1) */
+    opacity?: number;
+    /** Цвет подсказки */
+    color?: string;
+    /** Подсказка, следующая за курсором */
+    followCursor?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kamotive_ui",
-  "version": "1.2.14",
+  "version": "1.2.15",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [