kamotive_ui 1.2.12 → 1.2.14

package/dist/Icons/ChevronDown/ChevronDown10.d.ts

@@ -3,4 +3,5 @@ export declare const ChevronDown10: FC<{
     color?: string;
     htmlColor?: string;
     strokeWidth?: string;
+    rotation?: number;
 }>;

package/dist/Icons/ChevronDown/ChevronDown10.js

@@ -1,5 +1,6 @@
 import React from 'react';
-export const ChevronDown10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+export const ChevronDown10 = ({ color = 'inherit', htmlColor, strokeWidth, rotation = 0, }) => {
     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.84,9.59L11.5,15.25L17.16,9.59L16.45,8.89L11.5,13.84L6.55,8.89L5.84,9.59Z" })));
+        React.createElement("g", { transform: `rotate(${rotation}, 12, 12)` },
+            React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M5.84,9.59L11.5,15.25L17.16,9.59L16.45,8.89L11.5,13.84L6.55,8.89L5.84,9.59Z" }))));
 };

package/dist/Icons/IconDownload/IconDownload.d.ts

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+export declare const IconDownload: FC<{
+    color?: string;
+    htmlColor?: string;
+    strokeWidth?: string;
+    onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
+}>;

package/dist/Icons/IconDownload/IconDownload.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconDownload = ({ color = 'inherit', htmlColor, strokeWidth, onClick, }) => {
+    return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color, onClick: onClick },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', d: "M12,4V16.25L17.25,11L18,11.66L11.5,18.16L5,11.66L5.75,11L11,16.25V4H12M3,19H4V21H19V19H20V22H3V19Z" })));
+};

package/dist/Icons/index.d.ts

@@ -18,3 +18,4 @@ export { IconClose10 } from './IconClose/IconClose10';
 export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
 export { IconFile } from './IconFile/IconFile';
 export { IconUpload } from './IconUpload/IconUpload';
+export { IconDownload } from './IconDownload/IconDownload';

package/dist/Icons/index.js

@@ -18,3 +18,4 @@ export { IconClose10 } from './IconClose/IconClose10';
 export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
 export { IconFile } from './IconFile/IconFile';
 export { IconUpload } from './IconUpload/IconUpload';
+export { IconDownload } from './IconDownload/IconDownload';

package/dist/components/Checkbox/Checkbox.js

@@ -3,13 +3,25 @@ import styles from './Checkbox.module.css';
 import classNames from 'classnames';
 ;
 import { Typography } from '../Typography/Typography';
-export const Checkbox = ({ checked, onChange, disabled = false, size = 'sm', label }) => {
+export const Checkbox = ({ checked, onChange, disabled = false, size = 'sm', label, color, filled }) => {
     const handleChange = (e) => {
         if (onChange) {
             onChange(e);
         }
     };
-    return (React.createElement("label", { className: styles.checkbox },
+    const checkboxStyles = {
+        '--border-color': color || 'var(--icons-active)',
+        '--border-color-hover': color ? 'color-mix(in srgb, var(--border-color) 60%, white)' : 'var(--blue-main)',
+        '--border-color-checked': color || 'var(--icons-medium)',
+        '--border-color-disabled': color ? 'color-mix(in srgb, var(--border-color) 30%, white)' : 'var(--icons-light)',
+        '--background-color-hover': filled ? 'var(--border-color-hover)' : 'var(--white)',
+        '--background-color-checked': filled ? 'var(--border-color-checked)' : 'var(--white)',
+        '--background-color-disabled': filled ? 'var(--border-color-disabled)' : 'var(--white)',
+        '--arrow-color': filled ? 'var(--white)' : 'var(--border-color-checked)',
+        '--arrow-color-hover': filled ? 'var(--white)' : 'var(--border-color-hover)',
+        '--arrow-color-disabled': filled ? 'var(--white)' : 'var(--border-color-disabled)',
+    };
+    return (React.createElement("label", { className: styles.checkbox, style: checkboxStyles },
         React.createElement("input", { type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled, className: classNames(styles.input, styles[size]) }),
         React.createElement(Typography, { variant: 'Body2' }, label)));
 };

package/dist/components/Checkbox/Checkbox.module.css

@@ -23,23 +23,26 @@
   display: inline-block;
   padding: 6px;
 
-  border: 1px solid var(--icons-active);
+  border: 1px solid var(--border-color);
   border-radius: 3px;
   background-color: var(--white);
-  background-clip: content-box;
   position: relative;
   cursor: pointer;
 
 }
 
-.input[type="checkbox"]:hover,
-.input[type="checkbox"]:checked:hover,
-.input[type="checkbox"]:checked:hover::after {
-  border-color: var(--blue-main);
+.input[type="checkbox"]:hover {
+  border-color: var(--border-color-hover);
 }
 
 .input[type="checkbox"]:checked {
-  border-color: var(--icons-medium);
+  border-color: var(--border-color-checked);
+  background-color: var(--background-color-checked);
+}
+
+.input[type="checkbox"]:checked:hover {
+  border-color: var(--border-color-hover);
+  background-color: var(--background-color-hover);
 }
 
 .input[type="checkbox"]:checked::after {
@@ -52,16 +55,26 @@
   width: 40%;
   height: 75%;
 
-  border: solid var(--icons-medium);
+  border: solid var(--arrow-color);
   border-width: 0 2px 2px 0;
   background-color: none;
 }
 
-.input[type="checkbox"]:disabled,
-.input[type="checkbox"]:disabled:checked,
-.input[type="checkbox"]:disabled:checked:after {
+.input[type="checkbox"]:checked:hover::after {
+  border-color: var(--arrow-color-hover);
+}
+
+.input[type="checkbox"]:disabled {
   background-color: var(--white);
-  border-color: var(--icons-light);
+  border-color: var(--border-color-disabled);
   cursor: not-allowed;
   box-shadow: none;
 }
+
+.input[type="checkbox"]:disabled:checked {
+  background-color: var(--background-color-disabled);
+}
+
+.input[type="checkbox"]:disabled:checked:after {
+  border-color: var(--arrow-color-disabled);
+}

package/dist/components/Dialog/Dialog.d.ts

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

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import styles from './Dialog.module.css';
+import classNames from 'classnames';
+export const Dialog = ({ open, maxWidth = 'md', children, style, className, overlay = true, fullWidth = false }) => {
+    const isMaxWidthInPx = typeof maxWidth === 'string' && !isNaN(Number(maxWidth.replace('px', '')));
+    return (React.createElement(React.Fragment, null,
+        open && overlay && React.createElement("div", { className: styles.dialogOverlay }),
+        React.createElement("dialog", { open: open, className: classNames(styles['dialog'], !isMaxWidthInPx && styles[`maxWidth--${maxWidth}`], className), style: Object.assign(Object.assign({}, style), { maxWidth: isMaxWidthInPx ? maxWidth : '', width: fullWidth ? '100%' : '' }) },
+            React.createElement("div", { className: styles['content'] }, children))));
+};

package/dist/components/Dialog/Dialog.module.css

@@ -0,0 +1,47 @@
+.dialogOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--dialog-overlay);
+    z-index: 999;
+}
+.dialog {
+    border: none;
+    border-radius: 15px;
+    box-shadow: 0px 4px 16px var(--dialog-overlay);
+    padding: 30px;
+    background-color: var(--white);
+    z-index: 1000;
+    position: fixed; 
+    top: 50%; 
+    left: 50%; 
+    transform: translate(-50%, -50%);
+}
+
+.content {
+    display: flex;
+    flex-direction: column; 
+    gap: 1rem;
+}
+
+.maxWidth--xs {
+    max-width: 300px; 
+}
+
+.maxWidth--sm {
+    max-width: 400px; 
+}
+
+.maxWidth--md {
+    max-width: 500px; 
+}
+
+.maxWidth--lg {
+    max-width: 600px; 
+}
+
+.maxWidth--xl {
+    max-width: 800px; 
+}

package/dist/components/FileAttach/FileAttach.js

@@ -3,13 +3,13 @@ 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';
+import { FileItem } from '../FileItem/FileItem';
 import classNames from 'classnames';
 export const FileAttach = ({ maxFileSize = 2, maxFileCount = 10, acceptedFormats = {
     'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
     'application/pdf': ['.pdf'],
     'application/msword': ['.doc', '.docx'],
-}, addedFiles, setAddedFiles, disabled = false, className, style, }) => {
+}, addedFiles, setAddedFiles, onDownload, disabled = false, className, style, }) => {
     const [errorFiles, setErrorFiles] = useState([]);
     const fileValidator = (file) => {
         if (file.size > maxFileSize * 1024 * 1024 * 1024) {
@@ -42,8 +42,8 @@ export const FileAttach = ({ maxFileSize = 2, maxFileCount = 10, 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 acceptedFileItems = addedFiles.map((file, index) => (React.createElement(FileItem, { name: file.name, size: file.size, onDelete: () => deleteAcceptedFile(addedFiles, setAddedFiles, file.name), onDownload: onDownload, key: index })));
+    const fileRejectionItems = errorFiles.map(({ file, errors }) => (React.createElement(FileItem, { name: file.name, size: file.size, error: errors[0].message, onDelete: () => deleteRejectedFile(errorFiles, setErrorFiles, file.name), key: file.path })));
     const deleteAcceptedFile = (addedFiles, setAddedFiles, fileName) => {
         setAddedFiles(addedFiles.filter((file) => file.name !== fileName));
     };

package/dist/components/FileItem/FileItem.d.ts

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

package/dist/components/FileItem/FileItem.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './FileItem.module.css';
+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'] : ''}` },
+        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),
+                    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)' }))),
+        loading && React.createElement(ProgressBar, { animated: true, size: "sm", value: 100 }),
+        error && (React.createElement(Typography, { variant: "Caption", color: "var(--error-main)" }, error))));
+};

package/dist/components/FileItem/FileItem.module.css

@@ -0,0 +1,45 @@
+
+.fileItem {
+    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);
+  }
+
+  .fileItemFile{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .fileItemInfo {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    flex-grow: 1; 
+    align-items: flex-start;
+    overflow: hidden;
+}
+
+.fileItemIcon {
+    flex-shrink: 0
+}
+
+.fileItemName {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1; 
+    align-items: flex-start;
+    overflow: auto;
+}
+
+.fileIcon svg path {
+    stroke-width: 0.8;
+}

package/dist/components/IconButton/IconButton.d.ts

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

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,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, {
+            htmlColor: color,
+            strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
+        })));
+};

package/dist/components/IconButton/IconButton.module.css

@@ -0,0 +1,26 @@
+.iconButton {
+    cursor: pointer;
+    box-sizing: border-box;
+    background-color: var(--white);
+    border: none;
+}
+
+.iconButton--sm svg{
+    width: 14px;
+    height: 14px;
+}
+
+.iconButton--md svg{
+    width: 16px;
+    height: 16px;
+}
+
+.iconButton--lg svg{
+    width: 18px;
+    height: 18px;
+}
+
+.iconButton:disabled {
+    cursor: not-allowed;
+    box-shadow: none;
+}

package/dist/components/List/List.d.ts

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

package/dist/components/List/List.js

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import styles from './List.module.css';
+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);
+    const [isChecked, setIsChecked] = useState(checked || parentChecked);
+    const childIds = [];
+    React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child) && child.props.id) {
+            childIds.push(child.props.id);
+        }
+    });
+    const handleClick = (e) => {
+        if (collapsible) {
+            setIsOpen(!isOpen);
+        }
+        if (onClick) {
+            onClick();
+        }
+    };
+    const handleChildCheck = (childId, isChecked) => {
+        if (onCheck) {
+            onCheck(childId, isChecked);
+        }
+    };
+    const handleChildRadioSelect = (childId) => {
+        if (onRadioSelect) {
+            onRadioSelect(childId);
+        }
+    };
+    const handleCheckboxClick = (e) => {
+        e.stopPropagation();
+        const newCheckedState = !isChecked;
+        setIsChecked(newCheckedState);
+        if (onCheck) {
+            onCheck(id || "", newCheckedState);
+        }
+        if (childIds.length > 0 && onCheck) {
+            childIds.forEach((childId) => {
+                onCheck(childId, newCheckedState);
+            });
+        }
+    };
+    const handleRadioClick = (e) => {
+        e.stopPropagation();
+        if (id && onRadioSelect) {
+            onRadioSelect(id);
+        }
+    };
+    useEffect(() => {
+        setIsChecked(parentChecked || checked);
+    }, [parentChecked, checked]);
+    const headerClassNames = classNames(styles.header);
+    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 },
+            !isHeader && (React.createElement("div", null,
+                withCheckbox && (React.createElement("span", { onClick: handleCheckboxClick },
+                    React.createElement(Checkbox, { checked: isChecked, color: checkboxColor, filled: checkboxFilled, disabled: disabled }))),
+                withRadioButton && (React.createElement("span", { onClick: handleRadioClick },
+                    React.createElement(RadioButton, { checked: selected, value: id, disabled: disabled }))),
+                customBullet && React.createElement("span", { className: classNames(styles.bullet, bulletClassName) }, customBullet))),
+            React.createElement(Typography, { variant: "Body1" }, label),
+            collapsible && (React.createElement("span", { className: styles.indicator }, isOpen ? React.createElement(ChevronDown10, null) : React.createElement(ChevronDown10, { rotation: 270 }))))),
+        React.createElement("div", { className: collapsible ? contentClassNames : styles.content, style: { paddingLeft: !label ? 0 : '16px' } }, React.Children.map(children, (child) => {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    bulletClassName: classNames(styles.bullet, child.props.bulletClassName || bulletClassName),
+                    customBullet: child.props.customBullet !== undefined
+                        ? child.props.customBullet
+                        : customItemBullet !== undefined
+                            ? customItemBullet
+                            : customBullet,
+                    withCheckbox: child.props.withCheckbox !== undefined ? child.props.withCheckbox : withCheckbox,
+                    checkboxFilled: child.props.checkboxFilled !== undefined ? child.props.checkboxFilled : checkboxFilled,
+                    withRadioButton: child.props.withRadioButton !== undefined ? child.props.withRadioButton : withRadioButton,
+                    onCheck: handleChildCheck,
+                    onRadioSelect: handleChildRadioSelect,
+                    parentChecked: isChecked,
+                    selected: child.props.selected,
+                });
+            }
+            return child;
+        }))));
+};

package/dist/components/List/List.module.css

@@ -0,0 +1,40 @@
+.collapsibleList {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	padding: 8px;
+}
+
+.checkbox--active {
+	font-weight: bold;
+}
+
+.content {
+	transition: max-height 0.3s ease-out;
+	overflow: hidden;
+}
+
+.content--expanded {
+	max-height: fit-content;
+}
+
+.content--collapsed {
+	max-height: 0;
+}
+
+.bullet {
+	margin-right: 10px;
+}
+
+.indicator {
+	margin-left: auto;
+	font-size: 12px;
+	display: flex;
+	justify-content: center;
+}

package/dist/components/ListItem/ListItem.d.ts

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

package/dist/components/ListItem/ListItem.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import styles from './ListItem.module.css';
+import { Typography } from '../Typography/Typography';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { RadioButton } from '../RadioButton/RadioButton';
+export const ListItem = ({ id, onClick, onCheck, onRadioSelect, checked = false, selected = false, disabled = false, label, style, className, withCheckbox = false, checkboxColor, checkboxFilled, withRadioButton = false, customBullet, bulletClassName, children, parentChecked, }) => {
+    const [isChecked, setIsChecked] = useState(checked || parentChecked);
+    const itemClassNames = classNames(className, styles.listItem);
+    const handleClick = (e) => {
+        if (onClick) {
+            e.stopPropagation();
+            onClick();
+        }
+    };
+    const handleCheckboxClick = (e) => {
+        e.stopPropagation();
+        const newCheckedState = !isChecked;
+        setIsChecked(newCheckedState);
+        if (onCheck) {
+            onCheck(id || "", newCheckedState);
+        }
+    };
+    const handleRadioClick = (e) => {
+        e.stopPropagation();
+        if (id && onRadioSelect) {
+            onRadioSelect(id);
+        }
+    };
+    useEffect(() => {
+        setIsChecked(parentChecked || checked);
+    }, [parentChecked, checked]);
+    return (React.createElement("div", { className: itemClassNames, style: style, onClick: handleClick },
+        withCheckbox && (React.createElement("span", { className: styles.icon, onClick: handleCheckboxClick },
+            React.createElement(Checkbox, { checked: isChecked, color: checkboxColor, filled: checkboxFilled, disabled: disabled }))),
+        withRadioButton && (React.createElement("span", { className: styles.icon, onClick: handleRadioClick },
+            React.createElement(RadioButton, { checked: selected, value: id, disabled: disabled }))),
+        customBullet && React.createElement("span", { className: bulletClassName }, customBullet),
+        React.createElement(Typography, { variant: "Body1" }, label),
+        children));
+};

package/dist/components/ListItem/ListItem.module.css

@@ -0,0 +1,6 @@
+.listItem {
+	display: flex;
+	align-items: center;
+	padding: 8px;
+	cursor: pointer;
+}

package/dist/index.d.ts

@@ -14,8 +14,14 @@ 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 { FileItem as FileItem } from './components/FileItem/FileItem';
 export { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
 export { Spinner as Spinner } from './components/Spinner/Spinner';
-export type { ButtonProps, InputProps, DateInputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, LoaderProps, FileAttachProps, SpinnerProps } from './types';
+export { Dialog as Dialog } from './components/Dialog/Dialog';
+export { IconButton as IconButton } from './components/IconButton/IconButton';
+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';
 import './fonts.css';

package/dist/index.js

@@ -14,7 +14,13 @@ 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 { FileItem as FileItem } from './components/FileItem/FileItem';
 export { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
 export { Spinner as Spinner } from './components/Spinner/Spinner';
+export { Dialog as Dialog } from './components/Dialog/Dialog';
+export { IconButton as IconButton } from './components/IconButton/IconButton';
+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';
 import './fonts.css';

package/dist/types/index.d.ts

@@ -278,6 +278,10 @@ export interface CheckboxProps {
     size?: 'sm' | 'md';
     /** Текст лейбла */
     label?: string;
+    /** Цвет чекбока */
+    color?: string;
+    /** Заливка */
+    filled?: boolean;
 }
 export interface RadioProps {
     /** Значение */
@@ -348,7 +352,7 @@ export type SnackbarProps = {
     /** Функция обработки закрытия сообщения */
     onClose?: () => void;
 };
-export interface LoaderProps {
+export interface FileItemProps {
     /** Название файла */
     name?: string;
     /** Размер файла */
@@ -357,8 +361,12 @@ export interface LoaderProps {
     loading?: boolean;
     /** Текст ошибки загрузки файла */
     error?: string;
-    /** Функция обработки */
-    onClick?: () => void;
+    /** Функция обработки скачивания файла */
+    onDownload?: () => void;
+    /** Функция обработки удаления файла */
+    onDelete?: () => void;
+    /** Стили передаваемые напрямую */
+    style?: CSSProperties;
 }
 export interface FileAttachProps {
     /** Максимальный размер файла */
@@ -371,10 +379,96 @@ export interface FileAttachProps {
     addedFiles: File[];
     /**Сосотояние для добавления файлов */
     setAddedFiles: (addedFiles: File[]) => void;
+    /** Функция обработки скачивания файла */
+    onDownload?: () => void;
     /**Заблокировано добавление файлов*/
     disabled?: boolean;
     /** Дополнительный класс */
     className?: string;
     /** Стили передаваемые напрямую */
+    style?: React.CSSProperties;
+}
+export interface DialogProps {
+    /** Флаг открытия окна */
+    open: boolean;
+    /** Максимальная ширина окна */
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
+    /** Содержимое окна */
+    children?: React.ReactNode;
+    /** Стили передаваемые напрямую */
     style?: CSSProperties;
+    /** Дополнительный класс */
+    className?: string;
+    /**Задний фон окна */
+    overlay?: boolean;
+    /**Окно растягивается до максимальной ширины*/
+    fullWidth?: boolean;
+}
+export interface IconButtonProps {
+    /** Иконка кнопки */
+    icon?: React.ReactNode;
+    /** Размер кнопки */
+    size?: 'sm' | 'md' | 'lg';
+    /**Цвет кнопки */
+    color?: string;
+    /** Стиль кнопки иконки*/
+    style?: CSSProperties;
+    /** Заблокированная кнопка */
+    disabled?: boolean;
+    /** Callback, который будет вызван при клике по кнопке */
+    onClick: () => void;
+    /** Дочерние элементы */
+    children?: ReactNode;
+    /** Дополнительный класс */
+    className?: string;
+}
+export interface BaseListProps {
+    /** Идентификатор */
+    id?: string;
+    /** Обработчик клика */
+    onClick?: () => void;
+    /** Обработчик выбора чекбокса */
+    onCheck?: (activeId: string | string[], isChecked: boolean) => void;
+    /** Заблокированный чекбокс/RadioButton */
+    disabled?: boolean;
+    /** Кастомный цвет чекбокса */
+    checkboxColor?: string;
+    /** Заливка чекбокса */
+    checkboxFilled?: boolean;
+    /** Обработчик выбора RadioButton */
+    onRadioSelect?: (id: string) => void;
+    /** Активный чекбокс */
+    checked?: boolean;
+    /** Активный чекбокс родительского компонента */
+    parentChecked?: boolean;
+    /** Выбранный RadioButton */
+    selected?: boolean;
+    /** Отображаемый текст */
+    label?: string;
+    /** Добавлен чекбокс */
+    withCheckbox?: boolean;
+    /** Добавлен RadioButton */
+    withRadioButton?: boolean;
+    /** Кастомный буллит */
+    customBullet?: React.ReactNode;
+    /** Стиль кастомного буллита */
+    bulletClassName?: string;
+}
+export interface ListItemProps extends BaseListProps {
+    /** Стиль элемента списка */
+    style?: CSSProperties;
+    /** Дополнительный класс */
+    className?: string;
+    /** Дочерние элементы */
+    children?: ReactNode;
+}
+export interface ListProps extends BaseListProps {
+    /** Дочерние элементы */
+    children: React.ReactElement<ListItemProps> | React.ReactElement<ListItemProps>[];
+    /** Возможность раскрытия списка */
+    collapsible?: boolean;
+    /** Кастомный буллит дочернего компонента */
+    customItemBullet?: React.ReactNode;
+    /** Внешний компонент без буллитов/чекбоксов */
+    isHeader?: boolean;
 }

package/package.json

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

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

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

package/dist/components/Loader/Loader.js

@@ -1,18 +0,0 @@
-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: "Body1-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

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