kamotive_ui 1.2.2 → 1.2.3

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

@@ -1,13 +1,14 @@
 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: {
+        !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})`,

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/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>;

package/dist/components/Tab/Tab.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import styles from './Tab.module.css';
 import classNames from 'classnames';
+;
+import { Typography } from '../Typography/Typography';
 export const Tab = ({ value, onClick, label, selected, disabled = false }) => {
     const handleClick = (e) => {
         if (onClick && value && !disabled) {
             onClick(value);
         }
     };
-    return (React.createElement("button", { role: "tab", "aria-selected": selected, "aria-disabled": disabled, value: value, className: classNames(styles['tab'], {
-            'selected': selected,
-            'disabled': disabled,
-        }), onClick: handleClick }, label));
+    return (React.createElement("button", { role: "tab", "aria-selected": selected, "aria-disabled": disabled, value: value, className: classNames(styles.tab, {
+            [styles['selected']]: selected,
+            [styles['disabled']]: disabled,
+        }), onClick: handleClick },
+        React.createElement(Typography, { variant: selected ? 'Body2-Medium' : "Body2" }, label)));
 };

package/dist/components/Tab/Tab.module.css

@@ -1,9 +1,3 @@
-.story--wrapper-tab {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-}
-
 .tab {
   width: 126px;
   height: 24px;
@@ -13,17 +7,6 @@
   justify-content: center;
   background-color: var(--tab-extraLight);
   border: none;
-
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 18px;
-}
-
-.tab:hover {
-  background-color: var(--tab-medium);
-  border-radius: 7px;
 }
 
 .selected {
@@ -33,6 +16,10 @@
   background-color: var(--white);
   box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.04);
 }
+.tab:hover {
+  background-color: var(--tab-medium);
+  border-radius: 7px;
+}
 
 .selected:hover {
   background-color: var(--tab-light);

package/dist/components/Tabs/Tabs.d.ts

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

package/dist/components/Tabs/Tabs.js

@@ -1,3 +1,4 @@
+;
 import React from 'react';
 import styles from './Tabs.module.css';
 export const Tabs = ({ value, onChange, children }) => {
@@ -9,7 +10,7 @@ export const Tabs = ({ value, onChange, children }) => {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { role: "tablist", className: styles['tabs'] }, children === null || children === void 0 ? void 0 : children.map((child, index) => React.cloneElement(child, {
+        React.createElement("div", { role: "tablist", className: styles.tabs }, children === null || children === void 0 ? void 0 : children.map((child, index) => React.cloneElement(child, {
             key: index,
             selected: child.props.value === value,
             disabled: child.props.disabled,

package/dist/components/Tabs/Tabs.module.css

@@ -1,9 +1,3 @@
-.story--wrapper-tabs {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-}
-
 .tabs {
   display: flex;
   flex-direction: row;

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

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

package/dist/components/Tag/Tag.js

@@ -1,4 +1,5 @@
 import React from 'react';
+;
 import styles from './Tag.module.css';
 import classNames from 'classnames';
 export const Tag = ({ label, color = 'red', closeButton = false, onClick }) => {
@@ -9,7 +10,7 @@ export const Tag = ({ label, color = 'red', closeButton = false, onClick }) => {
         const b = parseInt(hex.slice(5, 7), 16);
         return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     };
-    return (React.createElement("span", { className: classNames(styles['tag'], !color.startsWith('#') ? `${color}` : ''), style: color.startsWith('#')
+    return (React.createElement("span", { className: classNames(styles.tag, !color.startsWith('#') && styles[color]), style: color.startsWith('#')
             ? {
                 color: color,
                 border: `1px solid ${color}`,

package/dist/components/Tag/Tag.module.css

@@ -1,24 +1,18 @@
-.story--wrapper-tag {
-    background-color: var(--white);
-    padding: 30px;
-    border-radius: 10px;
-    width: 300px;
-}
-
 .tag {
-    padding: 4px 10px;
-    border-radius: 8px;
+  padding: 4px 10px;
+  border-radius: 8px;
 
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 10px;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
 
-    font-family: 'Raleway';
-    font-style: normal;
-    font-weight: 500;
-    font-size: 12px;
-    line-height: 14px;
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 14px;
+  width: fit-content;
 }
 
 .tag .circle {
@@ -28,118 +22,118 @@
   position: relative;
 }
 
-.tag button[aria-label="Закрыть"] {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    position: relative;
-    width: 8px;
-    height: 8px;
+.tag button[aria-label='Закрыть'] {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  position: relative;
+  width: 8px;
+  height: 8px;
 }
 
-.tag button[aria-label="Закрыть"]::before,
-.tag button[aria-label="Закрыть"]::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) rotate(45deg);
-    height: 1px;
-    width: 100%;
-    background-color: var(--close-color); 
+.tag button[aria-label='Закрыть']::before,
+.tag button[aria-label='Закрыть']::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  height: 1px;
+  width: 100%;
+  background-color: var(--close-color);
 }
 
-.tag button[aria-label="Закрыть"]::after {
-    transform: translate(-50%, -50%) rotate(-45deg);
+.tag button[aria-label='Закрыть']::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
 }
 
 .tag.red {
-    color: var(--red);
-    background-color: var(--redBackground);
-    border: 1px solid var(--red)
+  color: var(--red);
+  background-color: var(--redBackground);
+  border: 1px solid var(--red);
 }
 
 .tag.red:hover {
-    background-color: var(--redHover);
+  background-color: var(--redHover);
 }
 
 .tag.orange {
-    color: var(--orange);
-    background-color: var(--orangeBackground);
-    border: 1px solid var(--orange)
+  color: var(--orange);
+  background-color: var(--orangeBackground);
+  border: 1px solid var(--orange);
 }
 
 .tag.orange:hover {
-    background-color: var(--orangeHover);
+  background-color: var(--orangeHover);
 }
 
 .tag.yellow {
-    color: var(--yellowText);
-    background-color: var(--yellowBackground);
-    border: 1px solid var(--yellow)
+  color: var(--yellowText);
+  background-color: var(--yellowBackground);
+  border: 1px solid var(--yellow);
 }
 
 .tag.yellow:hover {
-    background-color: var(--yellowHover);
+  background-color: var(--yellowHover);
 }
 
 .tag.green {
-    color: var(--green);
-    background-color: var(--greenBackground);
-    border: 1px solid var(--green)
+  color: var(--green);
+  background-color: var(--greenBackground);
+  border: 1px solid var(--green);
 }
 
 .tag.green:hover {
-    background-color: var(--greenHover);
+  background-color: var(--greenHover);
 }
 
 .tag.purple {
-    color: var(--purple);
-    background-color: var(--purpleBackground);
-    border: 1px solid var(--purple)
+  color: var(--purple);
+  background-color: var(--purpleBackground);
+  border: 1px solid var(--purple);
 }
 
 .tag.purple:hover {
-    background-color: var(--purpleHover);
+  background-color: var(--purpleHover);
 }
 
 .tag.indigo {
-    color: var(--indigo);
-    background-color: var(--indigoBackground);
-    border: 1px solid var(--indigo)
+  color: var(--indigo);
+  background-color: var(--indigoBackground);
+  border: 1px solid var(--indigo);
 }
 
 .tag.indigo:hover {
-    background-color: var(--indigoHover);
+  background-color: var(--indigoHover);
 }
 
 .tag.blue {
-    color: var(--blue);
-    background-color: var(--blueBackground);
-    border: 1px solid var(--blue)
+  color: var(--blue);
+  background-color: var(--blueBackground);
+  border: 1px solid var(--blue);
 }
 
 .tag.blue:hover {
-    background-color: var(--blueHover);
+  background-color: var(--blueHover);
 }
 
 .tag.teal {
-    color: var(--teal);
-    background-color: var(--tealBackground);
-    border: 1px solid var(--teal)
+  color: var(--teal);
+  background-color: var(--tealBackground);
+  border: 1px solid var(--teal);
 }
 
 .tag.teal:hover {
-    background-color: var(--tealHover);
+  background-color: var(--tealHover);
 }
 
 .tag.pink {
-    color: var(--pink);
-    background-color: var(--pinkBackground);
-    border: 1px solid var(--pink)
+  color: var(--pink);
+  background-color: var(--pinkBackground);
+  border: 1px solid var(--pink);
 }
 
 .tag.pink:hover {
-    background-color: var(--pinkHover);
+  background-color: var(--pinkHover);
 }

package/dist/components/ToggleButton/ToggleButton.d.ts

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

package/dist/components/ToggleButton/ToggleButton.js

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

package/dist/components/ToggleButton/ToggleButton.module.css

@@ -1,8 +1,3 @@
-.story--wrapper-toggle {
-    background-color: var(--white);
-    padding: 30px;
-    border-radius: 10px;
-}
 .toggle {
     display: flex;
     align-items: center;

package/dist/components/Typography/Typography.d.ts

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

package/dist/components/Typography/Typography.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 ;
 import classNames from 'classnames';
+;
 import { ETypographyVariants } from './enums';
 import styles from './Typography.module.css';
 /**
@@ -19,7 +20,7 @@ import styles from './Typography.module.css';
  */
 export const Typography = (_a) => {
     var { variant = ETypographyVariants.Body1, children, className, color, style } = _a, props = __rest(_a, ["variant", "children", "className", "color", "style"]);
-    const variantClass = classNames([`typography--variant-${variant}`], className);
+    const variantClass = classNames(styles[`typography--variant-${variant}`], className);
     const combinedStyle = Object.assign({ color }, style);
-    return (React.createElement("span", Object.assign({ className: styles[`${variantClass} ${className}`], style: combinedStyle }, props), children));
+    return (React.createElement("span", Object.assign({ className: variantClass, style: combinedStyle }, props), children));
 };

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

@@ -1,17 +1,4 @@
 
-.story--wrapper-typography{
-  background-color: var(--white);
-  width: 900px;
-}
-.typography--wrapper-typography {
-  display: grid;
-  grid-template-columns: 4fr 170px 80px 150px;
-  gap: 20px;
-  align-items: center;
-  height: 60px;
-  width: 1100px;
-}
-
 .typography--variant-Heading1 {
     font-family: var(--font-family-main);
     font-size: var(--font-size-48);
@@ -188,6 +175,14 @@
   letter-spacing: var(--letterSpacing);
   text-decoration: none;
 }
+.typography--variant-Body2-SemiBold{
+  font-family: var(--font-family-main);
+  font-size: var(--font-size-14);
+  font-weight: var(--font-weight-semiBold);
+  line-height: var(--lineHeight-14);
+  letter-spacing: var(--letterSpacing);
+  text-decoration: none;
+}
 .typography--variant-Body2-Bold{
   font-family: var(--font-family-main);
   font-size: var(--font-size-14);

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

@@ -11,9 +11,11 @@ export declare enum ETypographyVariants {
     'Body-Bold' = "Body-Bold",
     'Body1' = "Body1",
     'Body1-Medium' = "Body1-Medium",
+    'Body1-SemiBold' = "Body1-SemiBold",
     'Body1-Bold' = "Body1-Bold",
     'Body2' = "Body2",
     'Body2-Medium' = "Body2-Medium",
+    'Body2-SemiBold' = "Body2-SemiBold",
     'Body2-Bold' = "Body2-Bold",
     'Caption' = "Caption",
     'Caption-Medium' = "Caption-Medium",