kamotive_ui 1.2.2 → 1.2.4

package/dist/Icons/IconClose/IconClose10.d.ts

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

package/dist/Icons/IconClose/IconClose10.js

@@ -1,5 +1,5 @@
 import React from 'react';
-export const IconClose10 = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
-    return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: color },
+export const IconClose10 = ({ 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: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })));
 };

package/dist/Icons/IconFile/IconFile.d.ts

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

package/dist/Icons/IconFile/IconFile.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconFile = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "25", height: "30", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', strokeLinejoin: "round", d: "M14,11C12.34,11 11,9.66 11,8V4H7C5.9,4 5,4.9 5,6V19C5,20.1 5.9,21 7,21H16C17.1,21 18,20.1 18,19V11H14M12,8C12,9.1 12.9,10 14,10H17.59L12,4.41V8M7,3H12L19,10V19C19,20.66 17.66,22 16,22H7C5.34,22 4,20.66 4,19V6C4,4.34 5.34,3 7,3Z" })));
+};

package/dist/Icons/IconUpload/IconUpload.d.ts

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

package/dist/Icons/IconUpload/IconUpload.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const IconUpload = ({ color = 'inherit', htmlColor, strokeWidth, }) => {
+    return (React.createElement("svg", { width: "45", height: "45", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: color },
+        React.createElement("path", { fill: htmlColor || 'currentColor', stroke: htmlColor || 'currentColor', strokeWidth: strokeWidth || '0', strokeLinejoin: "round", d: "M5.5,20C2.46,20 0,17.54 0,14.5C0,11.46 2.46,9 5.5,9C6.5,6.65 8.8,5 11.5,5C14.93,5 17.74,7.66 18,11.03L18.5,11C21,11 23,13 23,15.5C23,18 21,20 18.5,20H5.5M5.5,10C3,10 1,12 1,14.5C1,17 3,19 5.5,19H18.5C20.43,19 22,17.43 22,15.5C22,13.57 20.43,12 18.5,12C17.94,12 17.4,12.13 16.93,12.37L17,11.5C17,8.46 14.54,6 11.5,6C8.96,6 6.83,7.72 6.19,10.05L5.5,10M12,17V11.75L14.25,14L15,13.34L11.5,9.84L8,13.34L8.75,14L11,11.75V17H12Z" })));
+};

package/dist/Icons/index.d.ts

@@ -14,3 +14,5 @@ export { IconWarning10 } from './IconWarning/IconWarning10';
 export { IconError10 } from './IconError/IconError10';
 export { IconClose10 } from './IconClose/IconClose10';
 export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
+export { IconFile } from './IconFile/IconFile';
+export { IconUpload } from './IconUpload/IconUpload';

package/dist/Icons/index.js

@@ -14,3 +14,5 @@ export { IconWarning10 } from './IconWarning/IconWarning10';
 export { IconError10 } from './IconError/IconError10';
 export { IconClose10 } from './IconClose/IconClose10';
 export { IconColorPicker10 } from './IconColorPicker/IconColorPicker10';
+export { IconFile } from './IconFile/IconFile';
+export { IconUpload } from './IconUpload/IconUpload';

package/dist/colors.css

@@ -1,7 +1,7 @@
 :root {
   --white: #ffffff;
 
-  --grey-medium: #d1d1d6;
+  --grey-medium: #aeaeb2;
   --grey-light: #e5e5ea;
   --grey-extraLight: #f2f2f7;
 
@@ -10,6 +10,7 @@
   --text-dark: #2a3336;
   --text-btn: #6f6f6f;
   --text-btn-light: #9ca0a7;
+  --icons-grey: #828286;
   --icons-medium: #5a5d61;
   --icons-light: #dce4f0;
   --icons-active: #bfd0eb;
@@ -32,6 +33,9 @@
   --info-main: #f2f2f7;
   --info-secondary: #e5e5ea;
 
+  --fills-active: #eef8ff;
+  --fills-disabled: #f5f5f5;
+
   --info-dark: rgb(209, 209, 214);
   
   --green:#34c759;

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonProps } from 'kamotive_ui';
+import { ButtonProps } from '../../types';
 /**
  * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
  */

package/dist/components/Button/Button.js

@@ -1,49 +1,101 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from './Button.module.css';
 import classNames from 'classnames';
+import { Typography } from '../Typography/Typography';
 /**
  * Компонент Button представляет собой кнопку, которую можно настроить с помощью различных параметров (размер, иконки, стили, состояние).
  */
-export const Button = ({ label, variant = 'fill', size = 'md', style = 'text', condition = 'default', icon, disabled = false, onClick, }) => {
-    const buttonClasses = classNames(styles['button'], styles[`button--${variant}-${condition}`], styles[`button--${size}`], styles[`button--${style}`]
-    // {
-    //   ['button--disabled']: disabled,
-    // }
-    );
+export const Button = ({ label, variant = 'fill', size = 'md', style, condition, icon, disabled = false, onClick, children, error, color, name, type = 'button', form }) => {
+    const [buttonStyle, setButtonStyle] = useState('');
+    const [buttonCondition, setButtonCondition] = useState(condition);
+    const buttonClasses = classNames(styles['button'], styles[`button--${size}`], styles[`button--${buttonStyle}`], {
+        [styles[`button--${variant}-${buttonCondition}`]]: buttonCondition && !color,
+        [styles[`button--${variant}-custom`]]: color && !error
+    });
     const iconColorFn = () => {
-        switch (condition) {
-            case 'default':
-                if (variant === 'outline') {
-                    return disabled ? '#8dc6ef' : '#0d99ff';
-                }
-                return disabled ? 'var(--blue-disabled)' : '#FFFFFF';
-            case 'error':
-                if (variant === 'outline') {
-                    return disabled ? '#ff8d87' : '#ff3b30';
-                }
-                return disabled ? 'var(--red-disabled)' : '#FFFFFF';
-            case 'success':
-                if (variant === 'outline') {
-                    return disabled ? '#8ac99a' : '#34c759';
+        if (buttonCondition && !color) {
+            switch (buttonCondition) {
+                case 'default':
+                    if (variant === 'outline') {
+                        return disabled ? '#8dc6ef' : '#0d99ff';
+                    }
+                    return '#FFFFFF';
+                case 'error':
+                    if (variant === 'outline') {
+                        return disabled ? '#ff8d87' : '#ff3b30';
+                    }
+                    return '#FFFFFF';
+                case 'success':
+                    if (variant === 'outline') {
+                        return disabled ? '#8ac99a' : '#34c759';
+                    }
+                    return '#FFFFFF';
+                case 'warning':
+                    if (variant === 'outline') {
+                        return disabled ? '#ffb44a' : '#ff9500';
+                    }
+                    return '#FFFFFF';
+                case 'info':
+                    return disabled ? 'var(--gray-disabled)' : '#6F6F6F';
+                default:
+                    return '#FFFFFF';
+            }
+        }
+        else if (color && !error) {
+            if (variant === 'outline') {
+                return disabled ? `color-mix(in srgb, ${color} 50%, white)` : color;
+            }
+            return '#FFFFFF';
+        }
+    };
+    const btnIcon = icon || typeof children === 'object' && children;
+    useEffect(() => {
+        if (!buttonStyle && style) {
+            setButtonStyle(style);
+        }
+        else {
+            if (btnIcon && variant !== 'link') {
+                if (!label && !(typeof children === 'string' && children)) {
+                    setButtonStyle('icon');
                 }
-                return disabled ? 'var(--green-disabled)' : '#FFFFFF';
-            case 'warning':
-                if (variant === 'outline') {
-                    return disabled ? '#ffb44a' : '#ff9500';
+                else {
+                    setButtonStyle('default');
                 }
-                return disabled ? 'var(--orange-disabled)' : '#FFFFFF';
-            case 'info':
-                return disabled ? 'var(--gray-disabled)' : '#6F6F6F';
-            default:
-                return disabled ? 'var(--blue-disabled)' : '#FFFFFF';
+            }
+            else {
+                setButtonStyle('text');
+            }
         }
-    };
+    }, [style, btnIcon, label, children]);
+    useEffect(() => {
+        if (!condition) {
+            if (error) {
+                setButtonCondition('error');
+            }
+            else {
+                setButtonCondition('default');
+            }
+        }
+        else {
+            error ? setButtonCondition('error') : setButtonCondition(condition);
+        }
+    }, [condition, error]);
     const iconColorStyle = iconColorFn();
-    return (React.createElement("button", { className: buttonClasses, onClick: onClick, disabled: disabled },
-        icon &&
-            React.cloneElement(icon, {
+    if (!buttonStyle) {
+        return React.createElement("button", { className: buttonClasses },
+            React.createElement(Typography, { variant: 'Body2' }, "\u041A\u043D\u043E\u043F\u043A\u0430"));
+    }
+    return (React.createElement("button", { className: buttonClasses, style: color && !error ? {
+            '--button-color': color,
+            '--button-hover-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 90%, black)` : `color-mix(in srgb, ${color} 10%, transparent)`,
+            '--button-active-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 80%, black)` : `color-mix(in srgb, ${color} 20%, transparent)`,
+            '--button-disabled-color': variant === 'fill' || variant === 'link' ? `color-mix(in srgb, ${color} 80%, white)` : `color-mix(in srgb, ${color} 10%, transparent)`,
+            '--button-disabled-textColor': variant === 'fill' ? `color-mix(in srgb, ${color} 80%, white)` : `color-mix(in srgb, ${color} 50%, transparent)`,
+        } : {}, onClick: onClick, disabled: disabled, "aria-disabled": disabled, type: type, name: name ? name : label ? `button-${label}` : 'button', form: form },
+        btnIcon && (buttonStyle === 'icon' || buttonStyle === 'default') &&
+            React.cloneElement(btnIcon, {
                 htmlColor: iconColorStyle,
                 strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
             }),
-        label));
+        (buttonStyle === 'text' || buttonStyle === 'default') && React.createElement(Typography, { variant: 'Body2' }, label ? label : (typeof children === 'string' && children))));
 };

package/dist/components/Button/Button.module.css

@@ -1,21 +1,26 @@
-.story--wrapper-btn {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-  width: 900px;
-}
-
 .button {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16.5px;
   border-radius: 10px;
-  padding: 5px 10px;
   cursor: pointer;
-  padding: 0.5em 1.5em;
   width: fit-content;
- 
+  box-sizing: border-box;
+}
+
+
+/* Общие стили для всех типов кнопок */
+.button--default,
+.button--text,
+.button--icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(0.5em - 1px) calc(0.7em - 1px);
+  height: 2.5em; 
+  box-sizing: border-box;
+  vertical-align: middle; 
+}
+
+.button--default {
+  gap: 5px;
 }
 
 /* Стили для дефолтных кнопок */
@@ -23,111 +28,169 @@
 .button--fill-default {
   background-color: var(--blue-main);
   color: var(--white);
-  border: none;
+  border: 1px solid transparent;
 }
 .button--fill-default:hover {
   background-color: var(--blue-secondary);
   color: var(--white);
-  border: none;
 }
 .button--fill-default:active {
   background-color: var(--blue-dark);
   color: var(--white);
-  border: none;
 }
 .button--fill-default:disabled {
   background-color: var(--blue-disabled);
   color: var(--white);
-  border: none;
   cursor: not-allowed;
 }
 /* ошибка */
 .button--fill-error {
   background-color: var(--error-main);
   color: var(--white);
-  border: none;
+  border: 1px solid transparent; 
+
 }
 .button--fill-error:hover {
   background-color: var(--error-secondary);
   color: var(--white);
-  border: none;
 }
 .button--fill-error:active {
   background-color: var(--error-dark);
   color: var(--white);
-  border: none;
 }
 .button--fill-error:disabled {
   background-color: var(--error-disabled);
   color: var(--white);
-  border: none;
   cursor: not-allowed;
 }
 /* success */
 .button--fill-success {
   background-color: var(--success-main);
   color: var(--white);
-  border: none;
+  border: 1px solid transparent; 
 }
 .button--fill-success:hover {
   background-color: var(--success-secondary);
   color: var(--white);
-  border: none;
 }
 .button--fill-success:active {
   background-color: var(--success-dark);
   color: var(--white);
-  border: none;
 }
 .button--fill-success:disabled {
   background-color: var(--success-disabled);
   color: var(--white);
-  border: none;
   cursor: not-allowed;
 }
 /* warning */
 .button--fill-warning {
   background-color: var(--warning-main);
   color: var(--white);
-  border: none;
+  border: 1px solid transparent; 
 }
 .button--fill-warning:hover {
   background-color: var(--warning-secondary);
   color: var(--white);
-  border: none;
 }
 .button--fill-warning:active {
   background-color: var(--warning-dark);
   color: var(--white);
-  border: none;
 }
 .button--fill-warning:disabled {
   background-color: var(--warning-disabled);
   color: var(--white);
-  border: none;
   cursor: not-allowed;
 }
 /* info */
 .button--fill-info {
   background-color: var(--info-main);
   color: var(--text-btn);
-  border: none;
+  border: 1px solid transparent; 
 }
 .button--fill-info:hover {
   background-color: var(--info-secondary);
   color: var(--text-btn);
-  border: none;
 }
 .button--fill-info:active {
   background-color: var(--info-dark);
   color: var(--text-btn);
-  border: none;
 }
 .button--fill-info:disabled {
   background-color: var(--info-main);
   color: var(--text-btn-light);
+  cursor: not-allowed;
+}
+
+/*--Для пользовательского цвета--*/
+.button--fill-custom {
+  background-color: var(--button-color);
+  color: var(--white);
+  border: 1px solid transparent; 
+}
+
+.button--fill-custom:hover {
+  background-color: var(--button-hover-color);
+}
+
+.button--fill-custom:active {
+  background-color: var(--button-active-color);
+}
+
+.button--fill-custom:disabled {
+  background-color: var(--button-disabled-color);
+  cursor: not-allowed;
+}
+
+.button--outline-custom {
+  background-color: transparent;
+  color: var(--button-color);
+  border: 1px solid var(--button-color);
+}
+
+.button--outline-custom:hover {
+  background-color: var(--button-hover-color);
+  color: var(--button-color);
+  border: 1px solid var(--button-color);
+}
+
+.button--outline-custom:active {
+  background-color: var(--button-active-color);
+  color: var(--button-color);
+  border: 1px solid var(--button-color);
+}
+
+.button--outline-custom:disabled {
+  background-color: var(--button-disabled-color);
+  color: var(--button-disabled-textColor);
+  border: 1px solid var(--button-disabled-textColor);
+  cursor: not-allowed;
+}
+
+.button--link-custom {
+  background-color: rgba(255, 255, 255, 0);
+  color: var(--button-color);
+  border: none;
+}
+
+.button--link-custom:hover {
+  background-color: rgba(255, 255, 255, 0);
+  color: var(--button-hover-color);
+  border: none;
+  text-decoration: underline;
+}
+
+.button--link-custom:active {
+  background-color: rgba(255, 255, 255, 0);
+  color: var(--button-active-color);
+  border: none;
+}
+
+.button--link-custom:disabled {
+  background-color: rgba(255, 255, 255, 0);
+  color: var(--button-disabled-color);
   border: none;
   cursor: not-allowed;
+  text-decoration: none;
 }
 
 /* Стили для outline кнопок */
@@ -256,6 +319,7 @@
   border: none;
   background-color: rgba(255, 255, 255, 0);
   cursor: not-allowed;
+  text-decoration: none;
 }
 .button--link-error {
   color: var(--error-main);
@@ -284,6 +348,7 @@
   border: none;
   background-color: rgba(255, 255, 255, 0);
   cursor: not-allowed;
+  text-decoration: none;
 }
 .button--link-warning {
   color: var(--warning-main);
@@ -298,6 +363,7 @@
   border: none;
   background-color: rgba(255, 255, 255, 0);
   cursor: not-allowed;
+  text-decoration: none;
 }
 .button--link-info {
   color: var(--text-btn);
@@ -312,32 +378,18 @@
   border: none;
   background-color: rgba(255, 255, 255, 0);
   cursor: not-allowed;
+  text-decoration: none;
 }
 
 /* Размеры кнопок */
 .button--sm {
-  /* font-size: 0.8rem; */
   font-size: 12px;
 }
 .button--md {
-  /* font-size: 1rem; */
   font-size: 14px;
 }
 .button--lg {
-  /* font-size: 1.2rem; */
   font-size: 16px;
 }
 
-/* Стили кнопок иконка/без иконки/ссылка */
-.button--default {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 0.5em 1em 0.5em 0.7em;
-}
-.button--text {
-  padding: 0.5em 1em;
-}
-.button--icon {
-  padding: 0.5em 0.7em;
-}
+

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

@@ -1,3 +1,3 @@
 import { FC } from 'react';
-import { CheckboxProps } from 'kamotive_ui';
+import { CheckboxProps } from '../../types';
 export declare const Checkbox: FC<CheckboxProps>;

package/dist/components/Checkbox/Checkbox.js

@@ -1,13 +1,15 @@
 import React from 'react';
 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 }) => {
     const handleChange = (e) => {
         if (onChange) {
             onChange(e);
         }
     };
-    return (React.createElement("label", { className: styles["checkbox"] },
-        React.createElement("input", { type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled, className: classNames('input', size) }),
-        label));
+    return (React.createElement("label", { className: styles.checkbox },
+        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

@@ -1,20 +1,9 @@
-.story--wrapper-checkbox {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-}
 
 .checkbox {
   display: flex;
   align-items: center;
   justify-content: left;
   gap: 5px;
-
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 16px;
   color: var(--text-dark);
 }
 

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { ColorPickerProps } from 'kamotive_ui';
+import { ColorPickerProps } from '../../types';
 /**
  * Компонент ColorPicker представляет собой элемент управления для выбора цвета.
  */