kamotive_ui 1.2.2 → 1.2.3

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/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,15 +1,12 @@
 import React 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,
-    // }
-    );
+    const buttonClasses = classNames(styles['button'], styles[`button--${variant}-${condition}`], styles[`button--${size}`], styles[`button--${style}`]);
     const iconColorFn = () => {
         switch (condition) {
             case 'default':
@@ -45,5 +42,5 @@ export const Button = ({ label, variant = 'fill', size = 'md', style = 'text', c
                 htmlColor: iconColorStyle,
                 strokeWidth: size === 'lg' ? '0.5' : size === 'md' ? '0.3' : '0.0',
             }),
-        label));
+        React.createElement(Typography, { variant: 'Body2' }, label)));
 };

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

@@ -1,15 +1,4 @@
-.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;

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 представляет собой элемент управления для выбора цвета.
  */

package/dist/components/ColorPicker/ColorPicker.js

@@ -5,6 +5,7 @@ import { Chrome } from '@uiw/react-color';
 import EditableInput from '@uiw/react-color-editable-input';
 import { GithubPlacement } from '@uiw/react-color-github';
 import { IconColorPicker10 } from '../../Icons';
+;
 /**
  * Компонент ColorPicker представляет собой элемент управления для выбора цвета.
  */
@@ -50,14 +51,14 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
             !autoOpen && document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [isOpen]);
-    const mainColorClasses = classNames(styles['circle'], {
-        'mainColor': mainColor,
+    const mainColorClasses = classNames(styles.circle, {
+        [styles['mainColor']]: mainColor,
     });
-    const colorCircleDefaultClasses = classNames(styles['circle'], {
-        'colorCircleDefault': color === '#ffffff' && !isColorChanged || isColorChanged && selectedColor !== colorValue
+    const colorCircleDefaultClasses = classNames(styles.circle, {
+        [styles.colorCircleDefault]: color === '#ffffff' && !isColorChanged || isColorChanged && selectedColor !== colorValue
     });
     const popoverClassess = classNames(styles['popover'], {
-        [`popover--${popoverPosition}`]: true,
+        [styles[`popover--${popoverPosition}`]]: true,
     });
     // Функция для преобразования HEXA в HEX
     const hexaToHex = (hexa = 'fff') => {
@@ -86,27 +87,27 @@ export const ColorPicker = ({ color = '#ffffff', mainColor, recentColors, setIsH
     useEffect(() => {
         setSelectedColor(color);
     }, [color]);
-    return (React.createElement("div", { className: (mainColor || recentColors) ? 'colorPickerWrapper' : '', onMouseLeave: () => setIsHovered && setIsHovered(false) },
+    return (React.createElement("div", { className: (mainColor || recentColors) && styles.colorPickerWrapper, onMouseLeave: () => setIsHovered && setIsHovered(false) },
         mainColor && React.createElement("div", { className: mainColorClasses, style: {
                 width: `${width}px`,
                 height: `${height}px`,
                 backgroundColor: (colorValue === null || colorValue === void 0 ? void 0 : colorValue.startsWith('#')) ? colorValue : `var(--${colorValue})`,
             }, onClick: () => setIsHovered && setIsHovered(false) }),
-        recentColors && recentColors.map((color, index) => (React.createElement("div", { key: index, className: "circle", style: {
+        recentColors && recentColors.map((color, index) => (React.createElement("div", { key: index, className: styles.circle, style: {
                 width: `${width}px`,
                 height: `${height}px`,
                 backgroundColor: color.startsWith('#') ? color : `var(--${color})`,
             }, onClick: () => colorChangeHandler(color) }))),
-        React.createElement("div", { className: "colorPicker" },
+        React.createElement("div", { className: styles.colorPicker },
             React.createElement("div", { ref: circleRef, className: colorCircleDefaultClasses, onClick: () => setIsOpen(!isOpen), style: {
                     width: `${width}px`,
                     height: `${height}px`,
                     backgroundColor: selectedColor.startsWith('#') ? selectedColor : `var(--${selectedColor})`,
                 } }),
             isOpen && (React.createElement("div", { ref: popoverRef, className: popoverClassess },
-                isOpen && React.createElement(IconColorPicker10, { className: "colorPickerIcon", htmlColor: 'var(--white)' }),
-                React.createElement(Chrome, { color: selectedColor, placement: GithubPlacement.Right, onChange: colorChangeHandler, className: "customChrome", showEyeDropper: false }),
-                React.createElement("div", { className: "hex", style: { padding: '0 10px 0 20px' } },
+                isOpen && React.createElement(IconColorPicker10, { className: styles.colorPickerIcon, htmlColor: 'var(--white)' }),
+                React.createElement(Chrome, { color: selectedColor, placement: GithubPlacement.Right, onChange: colorChangeHandler, className: styles.customChrome, showEyeDropper: false }),
+                React.createElement("div", { className: styles.hex, style: { padding: '0 10px 0 20px' } },
                     React.createElement(EditableInput, { value: hexaToHex(selectedColor), style: { width: 68, alignItems: 'flex-start' }, onChange: (e, color) => {
                             const formattedColor = hexaToHex(color.toString());
                             colorChangeHandler(formattedColor);

package/dist/components/ColorPicker/ColorPicker.module.css

@@ -1,9 +1,3 @@
-.story--wrapper-colorpicker {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-  width: 900px;
-}
 
 .colorPicker {
   -webkit-appearance: none;
@@ -13,11 +7,6 @@
   position: relative;
   cursor: pointer;
   padding: 0;
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16.5px;
-  font-size: 16px;
 }
 
 .colorPicker:hover{
@@ -25,13 +14,8 @@
   background-color: var(--white);
   border-radius: 50%;
   padding: 0;
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16.5px;
-  font-size: 16px;
-
 }
+
 .colorPicker--defaultColor{
   background: conic-gradient(
     rgba(255, 59, 48) 0deg,
@@ -143,7 +127,7 @@
   z-index: 100;
 }
 
-.w-color-swatch{
+:global(.w-color-swatch){
   padding: 10px !important;
   border-radius: 10px !important;
   width: fit-content !important;
@@ -154,73 +138,72 @@
   --github-border: 0px !important;
 }
 
-.w-color-swatch > div:nth-child(1),
-.w-color-swatch > div:nth-child(2){
+:global(.w-color-swatch) > div:nth-child(1),
+:global(.w-color-swatch) > div:nth-child(2){
  display: none !important;
 }
-.w-color-swatch > div:nth-child(3) {
+:global(.w-color-swatch) > div:nth-child(3) {
   width: 195px !important;
   height: 195px !important;
   border-radius: 10px !important;
 }
 
-.w-color-swatch > div:nth-child(4){
+:global(.w-color-swatch) > div:nth-child(4){
   gap: 15px !important;
   padding: 10px 0 !important;
   /* width: 80%; */
 }
-.w-color-swatch > div:nth-child(5){
+:global(.w-color-swatch) > div:nth-child(5){
   padding: 0 !important;
 
 }
-.w-color-swatch > div:nth-child(5) > div:nth-child(2){
+:global(.w-color-swatch) > div:nth-child(5) > div:nth-child(2){
   display: none !important;
   /* width: 80%; */
 }
 /* Для всех инпутов в пикере */
-.w-color-chrome .w-color-editable-input input {
+:global(.w-color-chrome) :global(.w-color-editable-input) input {
   font-family: 'Raleway' !important;
   font-style: normal !important;
   font-weight: 400 !important;
   line-height: 14px !important;
   font-size: 12px !important;
   margin: 0 !important;
-}
-.w-color-editable-input{
+}     
+:global(.w-color-editable-input){
   margin: 0 !important;
   max-width: 30px !important;
   flex-direction: column-reverse !important;
   --editable-input-box-shadow : none !important;
 }
-.w-color-editable-input-rgba{
+:global(.w-color-editable-input-rgba){
   justify-content: end !important;
 }
 
-.w-color-editable-input > span {
+:global(.w-color-editable-input) > span {
   padding-top: 0 !important;
 }
-.w-color-editable-input:nth-child(1)> input{
+:global(.w-color-editable-input:nth-child(1))> input{
   border-radius: 10px 0 0 10px !important;
-border: 1px solid var(--grey-light) !important;
+  border: 1px solid var(--grey-light) !important;
 }
-.w-color-editable-input:nth-child(2)> input{
+:global(.w-color-editable-input:nth-child(2))> input{
   border-radius: 0 0 0 0px !important;
 border: 1px solid var(--grey-light) !important;
 border-left: none !important;
 }
-.w-color-editable-input:nth-child(3)> input{
+:global(.w-color-editable-input:nth-child(3))> input{
   border-radius: 0 0 0 0px !important;
-
   border: 1px solid var(--grey-light) !important;
   border-left: none !important; 
 }
-.w-color-editable-input:nth-child(4)> input{
+:global(.w-color-editable-input:nth-child(4))> input{
   border-radius: 0px 10px 10px 0px !important;
   border: 1px solid var(--grey-light) !important;
   border-left: none !important; 
 }
 /* Для лейблов */
-.w-color-chrome-fields.w-color-editable-input label {
+:global(.w-color-chrome-fields) :global(.w-color-editable-input) label {
   font-family: 'Raleway' !important;
   font-style: normal !important;
   font-weight: 400 !important;
@@ -228,19 +211,19 @@ border-left: none !important;
   font-size: 16px !important;
 }
 
-.w-color-alpha-horizontal > div.w-color-interactive{
+:global(.w-color-alpha-horizontal > div.w-color-interactive){
   border-radius: 8px !important;
 }
-.w-color-alpha-horizontal:first-of-type > div:first-child{
+:global(.w-color-alpha-horizontal:first-of-type > div:first-child){
   border-radius: 50px !important;
 }
-.w-color-alpha-horizontal:nth-of-type(2) > div:first-child{
+:global(.w-color-alpha-horizontal:nth-of-type(2) > div:first-child){
   border-radius: 50px !important;
 }
 
 .colorPickerIcon {
   position: absolute;
-  top: 68%;
+  top: 69%;
   left: 8px;
   z-index: 200;
   padding: 10px;
@@ -251,10 +234,10 @@ border-left: none !important;
   bottom: 20px;
   left: -10px;
 }
-.hex .w-color-editable-input{
+.hex :global(.w-color-editable-input){
     border-radius: 10px !important; 
 }
-.hex > .w-color-editable-input > input {
+.hex > :global(.w-color-editable-input) > input {
   /* padding: 0 !important; */
   font-size: 12px !important;
   font-family: 'Raleway' !important;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -1,14 +1,18 @@
-import { FC } from 'react';
-import { DropdownProps } from 'kamotive_ui';
+import React, { FC } from 'react';
+import { DropdownProps, TOptions } from '../../types';
 /**
  * Компонент Dropdown позволяет пользователям выбирать однин вариант из выпадающего меню
-*/
+ */
 export interface DropdownListItemProps {
-    item: DropdownProps['items'][number];
-    size: 'sm' | 'md' | 'lg';
-    selectedItem: DropdownProps['items'][number] | null | string | number;
-    style?: 'default' | 'text';
-    onChange: (value: DropdownProps['items'][number]) => void;
+    item: TOptions | null;
+    getOptionLabel?: ((option: TOptions) => string);
+    size: 'md' | 'lg';
+    selectedItem: TOptions | null;
+    style?: 'icons' | 'text';
+    onChange: (event: React.MouseEvent<HTMLElement>, item: TOptions | null) => void;
+    isActive?: boolean;
+    activeIndex?: number;
+    index?: number;
 }
 export declare const DropdownListItem: FC<DropdownListItemProps>;
 export declare const Dropdown: FC<DropdownProps>;