kamotive_ui 1.2.2 → 1.2.4

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,23 +1,84 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+;
 import styles from './Tag.module.css';
 import classNames from 'classnames';
-export const Tag = ({ label, color = 'red', closeButton = false, onClick }) => {
-    const hexToRgba = (hex, alpha) => {
-        //преобразуем в rgba для заднего фона
-        const r = parseInt(hex.slice(1, 3), 16);
-        const g = parseInt(hex.slice(3, 5), 16);
-        const b = parseInt(hex.slice(5, 7), 16);
-        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+const hexToRgba = (hex, alpha) => {
+    //преобразуем в rgba для заднего фона
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+// функция для расчёта относительной яркости
+const getLuminance = (hexColor) => {
+    var _a;
+    const rgb = (_a = hexColor
+        .replace('#', '')
+        .match(/.{2}/g)) === null || _a === void 0 ? void 0 : _a.map((c) => parseInt(c, 16) / 255);
+    if (!rgb)
+        return 0;
+    const [r, g, b] = rgb.map((c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+// функция для проверки контрастности
+const getContrastRatio = (color1, color2) => {
+    const lum1 = getLuminance(color1);
+    const lum2 = getLuminance(color2);
+    return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+};
+// проверка и смену цвета текста
+const adjustTextColor = (backgroundColor) => {
+    const white = '#ffffff';
+    const black = hexToRgba('#000000', 0.4);
+    const contrastWithWhite = getContrastRatio(backgroundColor, white);
+    return contrastWithWhite < 1.5 ? black : "";
+};
+export const Tag = ({ label, color = 'red', closeButton = false, editable = 'false', onClick, onChange, }) => {
+    const [newLabel, setNewLabel] = useState(label);
+    const [width, setWidth] = useState(0);
+    const measurementDivRef = useRef(null);
+    const adjustedColor = adjustTextColor(color) || color;
+    useEffect(() => {
+        if (measurementDivRef.current) {
+            const textWidth = measurementDivRef.current.clientWidth;
+            setWidth(textWidth);
+        }
+    }, [newLabel]);
+    const handleBlur = () => {
+        if (onChange) {
+            onChange(newLabel);
+        }
     };
-    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}`,
+                color: adjustedColor,
+                border: `1px solid ${adjustedColor}`,
                 backgroundColor: hexToRgba(color, 0.2),
             }
             : {} },
-        label,
+        editable ? (React.createElement("div", { style: { position: "relative" } },
+            React.createElement("input", { type: "text", placeholder: label, value: newLabel, onChange: (e) => {
+                    setNewLabel(e.target.value);
+                }, onBlur: handleBlur, style: {
+                    color: (color === null || color === void 0 ? void 0 : color.startsWith('#')) ? adjustedColor : `var(--${color})`,
+                    '--placeholder-color': (color === null || color === void 0 ? void 0 : color.startsWith('#')) ? adjustedColor : `var(--${color})`,
+                    width: `${width}px`,
+                    minWidth: '25px',
+                } }),
+            React.createElement("div", { ref: measurementDivRef, style: {
+                    position: 'absolute',
+                    visibility: 'hidden',
+                    height: 0,
+                    whiteSpace: 'pre',
+                    fontSize: 'inherit',
+                    fontFamily: 'inherit',
+                    fontWeight: 'inherit',
+                    letterSpacing: 'inherit',
+                } }, newLabel || 'Item'))) : (React.createElement(React.Fragment, null,
+            " ",
+            label,
+            " ")),
         closeButton && (React.createElement("button", { type: "button", "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", style: color.startsWith('#')
-                ? { '--close-color': color }
+                ? { '--close-color': adjustedColor }
                 : { '--close-color': `var(--${color})` }, onClick: onClick }))));
 };

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,139 @@
   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='Закрыть']::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.tag input {
+  background: none;
+  border: none;
+}
+
+.tag input:hover {
+  background: none;
+  border: none;
 }
 
-.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 input:focus {
+  outline: none;
+  border: none;
+  background-color: none; 
 }
 
-.tag button[aria-label="Закрыть"]::after {
-    transform: translate(-50%, -50%) rotate(-45deg);
+.tag input::placeholder {
+  color: var(--placeholder-color);
+  opacity: 0.5;
 }
 
 .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",

package/dist/components/Typography/enums.js

@@ -12,9 +12,11 @@ export var ETypographyVariants;
     ETypographyVariants["Body-Bold"] = "Body-Bold";
     ETypographyVariants["Body1"] = "Body1";
     ETypographyVariants["Body1-Medium"] = "Body1-Medium";
+    ETypographyVariants["Body1-SemiBold"] = "Body1-SemiBold";
     ETypographyVariants["Body1-Bold"] = "Body1-Bold";
     ETypographyVariants["Body2"] = "Body2";
     ETypographyVariants["Body2-Medium"] = "Body2-Medium";
+    ETypographyVariants["Body2-SemiBold"] = "Body2-SemiBold";
     ETypographyVariants["Body2-Bold"] = "Body2-Bold";
     ETypographyVariants["Caption"] = "Caption";
     ETypographyVariants["Caption-Medium"] = "Caption-Medium";

package/dist/index.d.ts

@@ -1,16 +1,20 @@
 export { Button as Button } from './components/Button/Button';
-export { Input as Input } from './components/Input/Input';
-export { Tag as Tag } from './components/Tag/Tag';
+export { Checkbox as Checkbox } from './components/Checkbox/Checkbox';
+export { ColorPicker as ColorPicker } from './components/ColorPicker/ColorPicker';
 export { Dropdown as Dropdown } from './components/Dropdown/Dropdown';
+export { Input as Input } from './components/Input/Input';
 export { ProgressBar as ProgressBar } from './components/ProgressBar/ProgressBar';
 export { ProgressLoader as ProgressLoader } from './components/ProgressLoader/ProgressLoader';
-export { Typography as Typography } from './components/Typography/Typography';
-export { Checkbox as Checkbox } from './components/Checkbox/Checkbox';
 export { RadioButton as RadioButton } from './components/RadioButton/RadioButton';
-export { Tab as Tab } from './components/Tab/Tab';
-export { Tabs as Tabs } from './components/Tabs/Tabs';
 export { SettingTag as SettingTag } from './components/SettingTag/SettingTag';
-export { ColorPicker as ColorPicker } from './components/ColorPicker/ColorPicker';
 export { Snackbar as Snackbar } from './components/Snackbar/Snackbar';
+export { Tab as Tab } from './components/Tab/Tab';
+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 { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
+export { Spinner as Spinner } from './components/Spinner/Spinner';
+export type { ButtonProps, InputProps, TagProps, SettingTagProps, ToggleButtonProps, BaseOptions, TOptions, DropdownProps, TypographyProps, ProgressBarProps, ProgressLoaderProps, RadioProps, TabsProps, ColorPickerProps, SnackbarProps, LoaderProps, FileAttachProps, SpinnerProps } from './types';
 import './fonts.css';

package/dist/index.js

@@ -1,16 +1,19 @@
 export { Button as Button } from './components/Button/Button';
-export { Input as Input } from './components/Input/Input';
-export { Tag as Tag } from './components/Tag/Tag';
+export { Checkbox as Checkbox } from './components/Checkbox/Checkbox';
+export { ColorPicker as ColorPicker } from './components/ColorPicker/ColorPicker';
 export { Dropdown as Dropdown } from './components/Dropdown/Dropdown';
+export { Input as Input } from './components/Input/Input';
 export { ProgressBar as ProgressBar } from './components/ProgressBar/ProgressBar';
 export { ProgressLoader as ProgressLoader } from './components/ProgressLoader/ProgressLoader';
-export { Typography as Typography } from './components/Typography/Typography';
-export { Checkbox as Checkbox } from './components/Checkbox/Checkbox';
 export { RadioButton as RadioButton } from './components/RadioButton/RadioButton';
-export { Tab as Tab } from './components/Tab/Tab';
-export { Tabs as Tabs } from './components/Tabs/Tabs';
 export { SettingTag as SettingTag } from './components/SettingTag/SettingTag';
-export { ColorPicker as ColorPicker } from './components/ColorPicker/ColorPicker';
 export { Snackbar as Snackbar } from './components/Snackbar/Snackbar';
+export { Tab as Tab } from './components/Tab/Tab';
+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 { FileAttach as FileAttach } from './components/FileAttach/FileAttach';
+export { Spinner as Spinner } from './components/Spinner/Spinner';
 import './fonts.css';