kamotive_ui 1.2.0 → 1.2.2

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

@@ -0,0 +1,176 @@
+.story--wrapper-iput {
+  background-color: var(--white);
+  padding: 30px;
+  border-radius: 10px;
+  width: 900px;
+}
+
+.wrapper {
+  font-family: 'Raleway';
+  font-style: normal;
+  /* font-weight: 400; */
+  position: relative;
+}
+.wrapper--left {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  align-items: center;
+}
+
+.wrapper--input {
+  position: relative;
+}
+.inputText {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  position: relative;
+  font-size: 12px;
+  line-height: 14px;
+  color: var(--text-dark);
+  width: 203px;
+  /* width: 20%; */
+  padding: 10px;
+  outline: none;
+  border: 1px solid var(--grey-light);
+  border-radius: 10px;
+  /* width: fit-content; */
+}
+/* Стили при наведении мыши */
+.input:hover {
+  border: 1px solid #0d9aff00;
+  box-shadow: 0px 0px 2px var(--blue-main);
+}
+
+/* Стили при клике */
+.input:focus,
+.input:active {
+  border-color: var(--blue-main);
+  box-shadow: none;
+  color: var(--text-dark);
+  /* box-shadow: 0 0 2px var(--blue-main);  */
+}
+
+.textarea {
+  min-height: 90px;
+  display: inline-block;
+  overflow: auto;
+  resize: none;
+  padding: 8px 16px;
+}
+.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);
+  box-shadow: none;
+  color: var(--text-dark);
+}
+
+/* Стили для placeholder */
+.input::placeholder {
+  color: var(--text-grey);
+  font-size: 12px;
+  line-height: 14px;
+}
+.input:focus::placeholder {
+  color: var(--text-light);
+}
+
+.label {
+  line-height: 14px;
+  font-weight: 400;
+  transition: 0.3ms ease-out;
+  /* color: var(--text-grey); */
+}
+.label--default {
+  font-size: 12px;
+  position: absolute;
+  top: -20px;
+  cursor: text;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 32px);
+  color: var(--text-grey);
+}
+.label--left {
+  font-size: 13px;
+  color: var(--text-dark);
+}
+
+/* Стили для input с ошибкой */
+.input--error {
+  border-color: var(--error-main);
+  color: var(--error-main);
+}
+.input--error:hover,
+.input--error:focus {
+  border-color: var(--error-secondary);
+  box-shadow: none;
+  color: var(--error-secondary);
+}
+
+.helperText {
+  font-size: 12px;
+  line-height: 14px;
+  position: absolute;
+  left: 0px;
+  /* top: 110%; */
+  bottom: -20px;
+  cursor: text;
+  transition: 0.3ms ease-out;
+  max-width: calc(100% - 32px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--error-main);
+}
+
+/* Стили для disabled */
+.input:disabled {
+  background-color: rgba(120, 120, 128, 0.08);
+  color: var(--text-grey);
+  cursor: not-allowed;
+  border: none;
+  box-shadow: none;
+}
+
+/* Стили для Read Only */
+.readOnly {
+  background-color: rgba(120, 120, 128, 0.08);
+  color: var(--text-dark);
+  border: none;
+}
+.readOnly:hover {
+  box-shadow: none;
+  border: none;
+}
+
+/* Стили для Иконок */
+.input--withIcon {
+  padding-left: 35px;
+  top: 5%;
+}
+
+.icon {
+  position: absolute;
+  z-index: 1;
+  top: 25%;;
+  left: 10px;
+}
+

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { ProgressBarProps } from 'kamotive_ui';
+/**
+ * Компонент ProgressBar отображает прогресс в виде заполненной полосы.
+ */
+export declare const ProgressBar: FC<ProgressBarProps>;

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,41 @@
+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,
+    });
+    useEffect(() => {
+        if (animated) {
+            const targetPercent = validPercentage;
+            const animationDuration = 8000; // Длительность анимации в миллисекундах
+            const stepTime = 100; // Интервал обновления в миллисекундах
+            const totalSteps = animationDuration / stepTime;
+            const increment = targetPercent / totalSteps;
+            let currentPercent = 0;
+            const intervalId = setInterval(() => {
+                currentPercent = Math.min(currentPercent + increment, targetPercent);
+                setPercent(Math.round(currentPercent));
+                if (currentPercent >= targetPercent) {
+                    clearInterval(intervalId);
+                }
+            }, stepTime);
+            return () => clearInterval(intervalId);
+        }
+        else {
+            setPercent(validPercentage);
+        }
+    }, [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"] },
+            percent,
+            "%")))));
+};

package/dist/components/ProgressBar/ProgressBar.module.css

@@ -0,0 +1,56 @@
+.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;
+}
+
+.progress-bar {
+  border: none;
+  border-radius: 11px;
+  width: 330px;
+}
+.progress-bar.sm {
+  /* width: 20px; */
+  height: 4px;
+}
+.progress-bar.md {
+  /* width: 25vw; */
+  height: 6px;
+}
+.progress-bar.lg {
+  /* width: 30vw; */
+  height: 8px;
+}
+
+.progress-bar::-webkit-progress-bar {
+  background-color: var(--grey-light);
+  border-radius: 11px;
+}
+.progress-bar::-webkit-progress-value {
+  background-color: var(--blue-main);
+  border-radius: 11px;
+}
+
+.progress-bar--animated {
+  transition: all 8s ease-in-out;
+}
+.progress-bar--static {
+  transition: none;
+}
+.progress-bar-percentage {
+  /* position: absolute; */
+  /* top: 50%; */
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+

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

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

package/dist/components/ProgressLoader/ProgressLoader.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { Typography } from '../Typography/Typography';
+import styles from './ProgressLoader.module.css';
+import classNames from 'classnames';
+/**
+ * Компонент ProgressLoader отображает прогресс загрузки.
+ */
+const spinnerSizes = { xl: 89, lg: 56, md: 40, sm: 34 };
+const animationDuration = 4000; // Длительность анимации в миллисекундах
+const stepTime = 100; // Интервал обновления в миллисекундах
+export const ProgressLoader = ({ value = 0, size = 'xl', showValue = true, animated = false, }) => {
+    const [percent, setPercent] = useState(value);
+    const spinnerSize = typeof size === 'string' ? spinnerSizes[size] : size;
+    const validPercentage = Math.min(Math.max(value, 0), 100);
+    const fillPercentage = validPercentage / 100;
+    // Константы и расчеты для SVG
+    const viewBoxSize = 100;
+    const desiredStrokeWidth = size === 'xl' || size === 'lg' ? 5 : 4; // Желаемая толщина линии в пикселях
+    const strokeWidth = (desiredStrokeWidth * viewBoxSize) / spinnerSize;
+    const radius = (viewBoxSize - strokeWidth) / 2;
+    const center = viewBoxSize / 2;
+    //const fillPercentage = Math.min(1, Math.max(0, value / 100));
+    const circumference = 2 * Math.PI * radius;
+    const dashArray = circumference;
+    const dashOffset = circumference * (1 - fillPercentage);
+    const progressLoaderWrapperClasses = classNames(styles['progress-loader-wrapper'], size);
+    const getTypographySize = () => {
+        switch (size) {
+            case 'md':
+                return '12px';
+            case 'lg':
+                return '16px';
+            case 'xl':
+                return '24px';
+        }
+    };
+    useEffect(() => {
+        if (animated) {
+            const targetPercent = validPercentage;
+            const totalSteps = animationDuration / stepTime;
+            const increment = targetPercent / totalSteps;
+            let currentPercent = 0;
+            const intervalId = setInterval(() => {
+                currentPercent = Math.min(currentPercent + increment, targetPercent);
+                setPercent(Math.round(currentPercent));
+                if (currentPercent >= targetPercent) {
+                    clearInterval(intervalId);
+                }
+            }, stepTime);
+            return () => clearInterval(intervalId);
+        }
+        else {
+            setPercent(validPercentage);
+        }
+    }, [animated, validPercentage]);
+    return (React.createElement("div", { className: progressLoaderWrapperClasses, style: { width: spinnerSize, height: spinnerSize } },
+        React.createElement("svg", { id: "svg1", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, className: styles["progress-loader"] },
+            React.createElement("circle", { cx: center, cy: center, r: radius, stroke: "#e5e5ea", strokeWidth: strokeWidth, fill: "none", style: { strokeLinecap: 'round' } }),
+            React.createElement("circle", { cx: center, cy: center, r: radius, stroke: 'var(--blue-main)', strokeWidth: strokeWidth, fill: "none", style: {
+                    strokeDasharray: `${dashArray}`,
+                    strokeDashoffset: `${dashOffset}`,
+                    strokeLinecap: 'round',
+                    transform: 'rotate(-90deg)',
+                    transformOrigin: '50% 50%',
+                    //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"] },
+                percent,
+                "%")))));
+};

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

@@ -0,0 +1,26 @@
+.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%; */
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

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

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

package/dist/components/RadioButton/RadioButton.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './RadioButton.module.css';
+import classNames from 'classnames';
+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));
+};

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

@@ -0,0 +1,80 @@
+.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 {
+  width: 12px;
+  height: 12px;
+}
+
+.radio.md {
+  width: 16px;
+  height: 16px;
+}
+
+.input[type="radio"] {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-block;
+  padding: 6px;
+
+  border: 1px solid var(--icons-active);
+  border-radius: 50%;
+  background-color: var(--white);
+  background-clip: content-box;
+  position: relative;
+  cursor: pointer;
+  margin: 0px;
+}
+
+.input[type="radio"]:hover,
+.input[type="radio"]:checked:hover {
+  border-color: var(--blue-main);
+}
+
+.input[type="radio"]:checked:hover::after {
+  background-color: var(--blue-main);
+}
+
+.input[type="radio"]:checked {
+  border-color: var(--icons-medium);
+}
+
+/* Круг*/
+.input[type="radio"]:checked::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%); 
+  width: 50%;
+  height: 50%;
+  border-radius: 50%;
+  background-color: var(--icons-medium);
+}
+
+.input[type="radio"]:disabled,
+.input[type="radio"]:disabled:checked {
+  border-color: var(--icons-light);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+.input[type="radio"]:disabled:checked:after {
+  background-color: var(--icons-light);
+}

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

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

package/dist/components/SettingTag/SettingTag.js

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { Tag } from '../Tag/Tag';
+import ColorPicker from '../ColorPicker/ColorPicker';
+import styles from './SettingTag.module.css';
+export const SettingTag = ({ label, color, onChange }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const colorsOptions = ['red', 'orange', 'yellow', 'green', 'purple', 'indigo', 'blue', 'teal', 'pink'];
+    return (React.createElement("div", { style: { display: 'flex', gap: '10px', flexDirection: 'row', alignItems: 'center' } },
+        React.createElement(Tag, { label: label, color: color }),
+        !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 }))));
+};

package/dist/components/SettingTag/SettingTag.module.css

@@ -0,0 +1,16 @@
+.story--wrapper-tag {
+    background-color: var(--white);
+    padding: 30px;
+    border-radius: 10px;
+    width: 300px;
+    height: 300px; 
+}
+
+
+.circle {
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    position: relative;
+  }
+  

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

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { SnackbarProps } from 'kamotive_ui';
+/**
+* @description Snackbar компонент для отображения всплывающих уведомлений
+* @component
+@param {ReactNode} children - Содержимое уведомления
+@param {'success' | 'error' | 'warning' | 'info'} type - Тип уведомления, определяющий его стиль и иконку
+@param {number} duration - Время в миллисекундах, через которое уведомление исчезнет (по умолчанию 10000)
+@param {boolean} icon - Флаг отображения иконки (по умолчанию true)
+@param {() => void} onClose - Callback функция, вызываемая при закрытии уведомления
+@example
+Операция выполнена успешно
+@returns {JSX.Element | null} Возвращает компонент уведомления или null если оно скрыто */
+export declare const icons: {
+    success: React.JSX.Element;
+    error: React.JSX.Element;
+    warning: React.JSX.Element;
+    info: React.JSX.Element;
+};
+export declare const title: {
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+};
+export declare const Snackbar: FC<SnackbarProps>;

package/dist/components/Snackbar/Snackbar.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { IconClose10, IconError10, IconInfo10, IconSuccess10, IconWarning10 } from '../../Icons';
+import { Typography } from '../Typography/Typography';
+import styles from './Snackbar.module.css';
+import classNames from 'classnames';
+/**
+* @description Snackbar компонент для отображения всплывающих уведомлений
+* @component
+@param {ReactNode} children - Содержимое уведомления
+@param {'success' | 'error' | 'warning' | 'info'} type - Тип уведомления, определяющий его стиль и иконку
+@param {number} duration - Время в миллисекундах, через которое уведомление исчезнет (по умолчанию 10000)
+@param {boolean} icon - Флаг отображения иконки (по умолчанию true)
+@param {() => void} onClose - Callback функция, вызываемая при закрытии уведомления
+@example
+Операция выполнена успешно
+@returns {JSX.Element | null} Возвращает компонент уведомления или null если оно скрыто */
+export const icons = {
+    success: React.createElement(IconSuccess10, { htmlColor: "#34c759" }),
+    error: React.createElement(IconError10, { htmlColor: "#ff3b30" }),
+    warning: React.createElement(IconWarning10, { htmlColor: "#ff9500" }),
+    info: React.createElement(IconInfo10, { htmlColor: "#6F6F6F" }),
+};
+export const title = {
+    success: 'Успешно',
+    error: 'Ошибка',
+    warning: 'Внимание',
+    info: 'Информация',
+};
+export const Snackbar = ({ children, type, duration = 10000, icon = true, onClose }) => {
+    const [isVisible, setIsVisible] = useState(true);
+    useEffect(() => {
+        if (duration > 0) {
+            const timer = setTimeout(() => {
+                setIsVisible(false);
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [duration, onClose]);
+    const handleClose = () => {
+        setIsVisible(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    if (!isVisible)
+        return null;
+    const snackbarClasses = classNames(styles['snackbar-wrapper'], type ? `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(IconClose10, { htmlColor: 'var(--text-btn-light)' }))));
+};

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

@@ -0,0 +1,61 @@
+.story--wrapper-snackbar {
+  background-color: var(--white);
+  padding: 30px;
+  border-radius: 10px;
+  width: 300px;
+  height: 300px; 
+}
+.snackbar-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 10px 25px;
+  gap: 20px;
+  box-sizing: border-box;
+  position: relative;
+  min-width: 340px;
+  max-width: 500px;
+
+  border-radius: 15px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  min-height: 48px;
+}
+.snackbar-textAndIcon {
+  gap: 10px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+.snackbar-textAndIcon svg {
+  padding-top: 5px;
+}
+.snackbar-text {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.snackbar--success {
+  background-color: rgba(52, 199, 89, 0.15);
+}
+.snackbar--error {
+  background-color: rgba(255, 59, 48, 0.15);
+}
+.snackbar--warning {
+  background-color: rgba(255, 204, 0, 0.15);
+}
+.snackbar--info {
+  background-color: var(--white);
+  border: 1px solid #f2f2f7;
+}
+.button {
+  border: none;
+  background-color: transparent;
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  padding: 5px;
+  margin-top: 3px;
+}
+.button:hover {
+  background: rgba(130, 130, 134, 0.15);
+  border-radius: 2px;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * @type {enum} ESnackbarTypes
+ */
+export declare enum ESnackbarTypes {
+    success = "success",
+    error = "error",
+    warning = "warning",
+    info = "info"
+}