kamotive_ui 1.2.2 → 1.2.4

package/dist/components/Input/Input.module.css

@@ -1,41 +1,54 @@
-.story--wrapper-iput {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-  width: 900px;
-}
-
-.wrapper {
-  font-family: 'Raleway';
-  font-style: normal;
-  /* font-weight: 400; */
+.wrapper--input {
   position: relative;
+  max-width: 260px;
+  width: 100%;
+}
+.wrapper--input-label {
+  margin-top: 20px;
+}
+.wrapper--input-helperText {
+  margin-bottom: 15px;
 }
 .wrapper--left {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
   gap: 20px;
   align-items: center;
+  width: fit-content;
+  max-width: none;
 }
 
-.wrapper--input {
-  position: relative;
-}
-.inputText {
-  font-family: 'Raleway';
+.input {
+  font-family: var(--font-family-main);
   font-style: normal;
   font-weight: 400;
   position: relative;
-  font-size: 12px;
-  line-height: 14px;
+
   color: var(--text-dark);
-  width: 203px;
-  /* width: 20%; */
-  padding: 10px;
+  background-color: transparent;
+  padding: 10px 15px;
   outline: none;
   border: 1px solid var(--grey-light);
+  mix-blend-mode: multiply;
   border-radius: 10px;
-  /* width: fit-content; */
+  display: inline-flex;
+  width: 100%;
+}
+
+.input--left {
+  min-width: 260px;
+}
+.input.lg {
+  font-size: 14px;
+  line-height: 20px;
+}
+.input.md {
+  font-size: 12px;
+  line-height: 16px;
+}
+.input.sm {
+  font-size: 10px;
+  line-height: 14px;
 }
 /* Стили при наведении мыши */
 .input:hover {
@@ -62,18 +75,6 @@
 .resize {
   resize: both;
 }
-.inputText.lg {
-  height: 40px;
-  /* height: 25px; */
-}
-.inputText.md {
-  height: 35px;
-  /* height: 20px; */
-}
-.inputText.sm {
-  /* height: 30px; */
-  height: 25px;
-}
 
 .filled {
   border-color: var(--blue-main);
@@ -84,9 +85,18 @@
 /* Стили для placeholder */
 .input::placeholder {
   color: var(--text-grey);
-  font-size: 12px;
+  /* font-size: 12px; */
   line-height: 14px;
 }
+.input::placeholder.sm {
+  font-size: 10px;
+}
+.input::placeholder.md {
+  font-size: 12px;
+}
+.input::placeholder.lg {
+  font-size: 14px;
+}
 .input:focus::placeholder {
   color: var(--text-light);
 }
@@ -98,9 +108,8 @@
   /* color: var(--text-grey); */
 }
 .label--default {
-  font-size: 12px;
   position: absolute;
-  top: -20px;
+  top: -18px;
   cursor: text;
   white-space: nowrap;
   overflow: hidden;
@@ -108,9 +117,42 @@
   max-width: calc(100% - 32px);
   color: var(--text-grey);
 }
+.label--default .lg {
+  font-size: 12px;
+}
+.label--default.md {
+  font-size: 10px;
+}
+.label--default .sm {
+  font-size: 16px;
+}
 .label--left {
   font-size: 13px;
   color: var(--text-dark);
+  text-wrap-mode: nowrap;
+}
+.label--left.lg {
+  font-size: 14px;
+}
+.label--left .md {
+  font-size: 12px;
+}
+.label--left .sm {
+  font-size: 10px;
+}
+
+/* Стили для обязательного input */
+.label--default.label--required {
+  position: relative;
+  top: 0;
+}
+.label--required::after {
+  content: '*';
+  color: var(--error-main);
+  position: absolute;
+  margin-left: 2px;
+  top: 2px;
+  font-size: 22px;
 }
 
 /* Стили для input с ошибкой */
@@ -125,16 +167,22 @@
   color: var(--error-secondary);
 }
 
-.helperText {
+.helperText.md {
+  font-size: 10px;
+}
+.helperText.sm {
+  font-size: 8px;
+}
+.helperText.lg {
   font-size: 12px;
-  line-height: 14px;
+}
+.helperText {
   position: absolute;
   left: 0px;
-  /* top: 110%; */
-  bottom: -20px;
+  bottom: -15px;
   cursor: text;
   transition: 0.3ms ease-out;
-  max-width: calc(100% - 32px);
+  /* max-width: calc(100% - 32px); */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -170,7 +218,6 @@
 .icon {
   position: absolute;
   z-index: 1;
-  top: 25%;;
+  top: 25%;
   left: 10px;
 }
-

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.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { ProgressBarProps } from 'kamotive_ui';
+import { ProgressBarProps } from '../../types';
 /**
  * Компонент ProgressBar отображает прогресс в виде заполненной полосы.
  */

package/dist/components/ProgressBar/ProgressBar.js

@@ -2,15 +2,16 @@ import React, { useEffect, useState } from 'react';
 import { Typography } from '../Typography/Typography';
 import styles from './ProgressBar.module.css';
 import classNames from 'classnames';
+;
 /**
  * Компонент ProgressBar отображает прогресс в виде заполненной полосы.
  */
 export const ProgressBar = ({ value = 0, max = 100, size = 'md', showValue = true, animated = false, }) => {
     const [percent, setPercent] = useState(value);
     const validPercentage = Math.min(Math.max(value, 0), max);
-    const progressBarClasses = classNames(styles['progress-bar'], size, {
-        'progress-bar--animated': animated,
-        'progress-bar--static': !animated,
+    const progressBarClasses = classNames(styles['progress-bar'], styles[size], {
+        [styles['progress-bar--animated']]: animated,
+        [styles['progress-bar--static']]: !animated,
     });
     useEffect(() => {
         if (animated) {
@@ -35,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/ProgressBar/ProgressBar.module.css

@@ -1,14 +1,3 @@
-.story--wrapper-progressbar {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-  width: 900px;
-}
-.progress-bar--default-story {
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-}
 .progress-bar--wrapper {
   display: flex;
   gap: 40px;
@@ -50,6 +39,10 @@
 .progress-bar-percentage {
   /* position: absolute; */
   /* top: 50%; */
+  /* font-family: var(--font-family-main);
+  font-weight: 300;
+  font-size: 11px;
+  line-height: 13; */
   left: 50%;
   transform: translate(-50%, -50%);
 }

package/dist/components/ProgressLoader/ProgressLoader.d.ts

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

package/dist/components/ProgressLoader/ProgressLoader.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Typography } from '../Typography/Typography';
 import styles from './ProgressLoader.module.css';
 import classNames from 'classnames';
+;
 /**
  * Компонент ProgressLoader отображает прогресс загрузки.
  */
@@ -23,7 +24,7 @@ export const ProgressLoader = ({ value = 0, size = 'xl', showValue = true, anima
     const circumference = 2 * Math.PI * radius;
     const dashArray = circumference;
     const dashOffset = circumference * (1 - fillPercentage);
-    const progressLoaderWrapperClasses = classNames(styles['progress-loader-wrapper'], size);
+    const progressLoaderWrapperClasses = classNames(styles['progress-loader-wrapper'], styles[size]);
     const getTypographySize = () => {
         switch (size) {
             case 'md':
@@ -65,7 +66,7 @@ export const ProgressLoader = ({ value = 0, size = 'xl', showValue = true, anima
                     //transition: animated ? 'stroke-dashoffset 0.5s ease-in-out' : 'none',
                 } }, animated && (React.createElement("animate", { attributeName: "stroke-dashoffset", dur: `${animationDuration / 1000}`, values: `${circumference}; ${percent / 100}`, fill: "freeze" })))),
         showValue && size !== 'sm' && (React.createElement("div", { className: styles["progress-percentage"] },
-            React.createElement(Typography, { variant: "Subheading2", color: '#9CA0A7', style: { fontSize: getTypographySize(), fontWeight: '300' }, className: styles["progress-percentage"] },
+            React.createElement(Typography, { variant: "Subheading2", color: '#9CA0A7', style: { fontSize: getTypographySize(), fontWeight: '300' } },
                 percent,
                 "%")))));
 };

package/dist/components/ProgressLoader/ProgressLoader.module.css

@@ -1,26 +1,17 @@
-.story--wrapper-progress-loader {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-  width: 900px;
-}
 .progress-loader-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }
-.progress-loader--default-story {
-  display: flex;
-  gap: 30px;
-}
+
 .progress-loader {
   width: 100px;
   height: 100px;
 }
 .progress-percentage {
   position: absolute;
-  /* top: 50%; */
+  top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

package/dist/components/RadioButton/RadioButton.d.ts

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

package/dist/components/RadioButton/RadioButton.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import styles from './RadioButton.module.css';
 import classNames from 'classnames';
+;
+import { Typography } from '../Typography/Typography';
 export const RadioButton = ({ value, label, checked, onChange, disabled = false, size = 'sm' }) => {
     const handleChange = (e) => {
         if (onChange) {
             onChange(e);
         }
     };
-    return (React.createElement("label", { className: styles["radio"] },
-        React.createElement("input", { type: "radio", checked: checked, value: value, onChange: handleChange, disabled: disabled, className: classNames(styles['input'], size) }),
-        label));
+    return (React.createElement("label", { className: styles.radio },
+        React.createElement("input", { type: "radio", checked: checked, value: value, onChange: handleChange, disabled: disabled, className: classNames(styles.input, styles[size]) }),
+        React.createElement(Typography, { variant: 'Body2' }, label)));
 };

package/dist/components/RadioButton/RadioButton.module.css

@@ -1,29 +1,17 @@
-.story--wrapper-radio {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-}
 
 .radio {
   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);
 }
 
-.radio.sm {
+.input[type="radio"].sm {
   width: 12px;
   height: 12px;
 }
 
-.radio.md {
+.input[type="radio"].md {
   width: 16px;
   height: 16px;
 }
@@ -33,7 +21,6 @@
   appearance: none;
   display: inline-block;
   padding: 6px;
-
   border: 1px solid var(--icons-active);
   border-radius: 50%;
   background-color: var(--white);

package/dist/components/SettingTag/SettingTag.d.ts

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

package/dist/components/SettingTag/SettingTag.js

@@ -4,12 +4,13 @@ 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 }),
-        !isHovered ? (React.createElement("div", { className: styles['circle'], onMouseEnter: () => setIsHovered(true), style: {
+    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/SettingTag/SettingTag.module.css

@@ -1,12 +1,3 @@
-.story--wrapper-tag {
-    background-color: var(--white);
-    padding: 30px;
-    border-radius: 10px;
-    width: 300px;
-    height: 300px; 
-}
-
-
 .circle {
     border-radius: 50%;
     cursor: pointer;

package/dist/components/Snackbar/Snackbar.d.ts

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { SnackbarProps } from 'kamotive_ui';
+import { SnackbarProps } from '../../types';
 /**
 * @description Snackbar компонент для отображения всплывающих уведомлений
 * @component

package/dist/components/Snackbar/Snackbar.js

@@ -3,6 +3,7 @@ import { IconClose10, IconError10, IconInfo10, IconSuccess10, IconWarning10 } fr
 import { Typography } from '../Typography/Typography';
 import styles from './Snackbar.module.css';
 import classNames from 'classnames';
+;
 /**
 * @description Snackbar компонент для отображения всплывающих уведомлений
 * @component
@@ -43,13 +44,13 @@ export const Snackbar = ({ children, type, duration = 10000, icon = true, onClos
     };
     if (!isVisible)
         return null;
-    const snackbarClasses = classNames(styles['snackbar-wrapper'], type ? `snackbar--${type}` : '');
+    const snackbarClasses = classNames(styles['snackbar-wrapper'], styles[`snackbar--${type}`]);
     return (React.createElement("div", { className: snackbarClasses },
         React.createElement("div", { className: styles['snackbar-textAndIcon'] },
             icon && icons[type],
             React.createElement("div", { className: styles['snackbar-text'] },
                 React.createElement(Typography, { variant: "Body2-Medium", color: 'var(--text-dark)' }, title[type]),
                 React.createElement(Typography, { variant: "Caption", color: 'var(--text-btn-light)' }, children))),
-        React.createElement("button", { className: styles['button'], onClick: handleClose },
+        React.createElement("button", { className: styles.button, onClick: handleClose },
             React.createElement(IconClose10, { htmlColor: 'var(--text-btn-light)' }))));
 };

package/dist/components/Snackbar/Snackbar.module.css

@@ -1,10 +1,3 @@
-.story--wrapper-snackbar {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-  width: 300px;
-  height: 300px; 
-}
 .snackbar-wrapper {
   display: flex;
   justify-content: space-between;
@@ -17,8 +10,7 @@
   max-width: 500px;
 
   border-radius: 15px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  min-height: 48px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1)
 }
 .snackbar-textAndIcon {
   gap: 10px;

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/Tab/Tab.d.ts

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