kamotive_ui 1.2.2 → 1.2.3

package/dist/components/Dropdown/Dropdown.module.css

@@ -1,72 +1,69 @@
-.story--wrapper-dropdown {
-  background-color: var(--white);
-  padding: 30px;
-  border-radius: 10px;
-  width: 900px;
+.dropdown--container {
+  position: relative;
+  width: 100%;
+  max-width: 260px;
 }
-.option--wrapper{
+.dropdown--container-left {
   display: flex;
+  gap: 20px;
   align-items: center;
-  justify-content: space-between;
+  flex-wrap: nowrap;
+  width: fit-content;
+  max-width: none;
 }
-.option--icon{
-  margin-left: 8px;
+.dropdown--container-label {
+  margin-top: 20px;
 }
-.dropdown--container{
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16.5px;
-  display: inline-block;
-  position: relative;
+.dropdown--container-helperText {
+  margin-bottom: 15px;
 }
-.wrapper--left {
+
+.option--wrapper {
   display: flex;
-  flex-direction: row;
-  gap: 20px;
   align-items: center;
-  flex-wrap: nowrap;
+  justify-content: space-between;
+}
+
+.option--icon {
+  margin-left: 8px;
 }
 
 .button {
-  font-family: 'Raleway';
+  font-family: var(--font-family-main);
   font-style: normal;
   font-weight: 400;
   line-height: 16.5px;
- 
   border-radius: 10px;
   cursor: pointer;
-  /* padding: 0.5em 1em; */
   padding: 10px 15px;
   transition: all 0.3s ease;
-  width: 100%;
-  /* background-color: var(--white); */
   background-color: transparent;
-  color: rgba(60, 60, 67, 0.6);
+  color: var(--text-dark);
   border: 1px solid var(--grey-light);
+  /* mix-blend-mode: multiply; */
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 20px;
   justify-content: space-between;
-  min-width: fit-content;
- 
+  /* min-width: fit-content; */
+  position: relative;
+  width: 100%;
 }
-.button:hover{
+.button:hover {
   border: 1px solid #0d9aff00;
   box-shadow: 0px 0px 2px var(--blue-main);
 }
 .button:focus,
-.button:active{
+.button:active {
   border-color: var(--blue-main);
   box-shadow: none;
-  
 }
-.button--disabled{
+.button--disabled {
   background-color: rgba(120, 120, 128, 0.08);
   border: 1px solid #0d9aff00;
   color: rgba(60, 60, 67, 0.3);
 }
-.button--readOnly{
+.button--readOnly {
   background-color: rgba(120, 120, 128, 0.08);
   border: 1px solid #0d9aff00;
   color: var(--text-dark);
@@ -76,48 +73,74 @@
 .button--disabled:active,
 .button--readOnly:hover,
 .button--readOnly:focus,
-.button--readOnly:active{
+.button--readOnly:active {
   box-shadow: none;
   border: 1px solid #0d9aff00;
 }
-.button--default--item-selected{
+.button--error {
+  border-color: var(--error-main);
+  color: var(--error-main);
+}
+.button--icons--item-selected {
   display: flex;
   align-items: center;
   gap: 10px;
 }
-.button-item--selected{
+.button-item--selected {
   color: var(--text-dark);
 }
 
 /* Размеры кнопок */
-.button--sm {
-  /* font-size: 0.8rem; */
-  font-size: 12px; 
-}
 .button--md {
-  /* font-size: 1rem; */
-  font-size: 14px; 
+  font-size: 12px;
 }
 .button--lg {
-  /* font-size: 1.2rem; */
-  font-size: 16px; 
-}
-
-.dropdown{
- position: absolute;
-display: flex;
-margin-top: 5px;
-flex-direction: column;
-align-items: flex-start;
-padding: 10px 0px;
-max-height: 175px;
-width: 100%;
-background: #FFFFFF;
-box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.2);
-border-radius: 12px;
-overflow-y: auto;
-z-index: 1000;
-overflow-x: hidden;
+  font-size: 14px;
+}
+.button:focus-visible {
+  outline: none;
+}
+
+.resetButton,
+.dropdownIcon {
+  position: absolute;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.resetButton{
+  right: 35px;
+}
+.dropdownIcon{
+  right: 5px;
+}
+.resetButton:hover,
+.dropdownIcon:hover {
+  background-color: rgba(120, 120, 128, 0.08);
+  border-radius: 50%;
+}
+
+.dropdown {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  display: flex;
+  margin-top: 5px;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 10px 0px;
+  max-height: 175px;
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  overflow-y: auto;
+  z-index: 1000;
+  overflow-x: hidden;
 }
 
 .item--container {
@@ -126,13 +149,12 @@ overflow-x: hidden;
   margin: auto;
 }
 
-.item--container:hover{
+.item--container:hover,
+.item--container--active {
   background-color: rgba(120, 120, 128, 0.08);
   border-radius: 5px;
-  width: 87%;
   margin: auto;
-  }
-
+}
 
 .item-block {
   cursor: pointer;
@@ -141,30 +163,19 @@ overflow-x: hidden;
 }
 .item-block--disabled {
   color: var(--text-light);
-  cursor: not-allowed ;
+  cursor: not-allowed;
 }
-.item-block-default,
+.item-block-icons,
 .item-block-text {
   display: grid;
   grid-template-columns: auto 1fr;
   justify-content: flex-start;
   align-items: center;
-  gap:10px;
-}
-.item-block-default--selected {
-  display: grid;
-  grid-template-columns: auto 1fr 20px;
-  justify-content: space-between;
-  align-items: center;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   gap: 10px;
-  color: var(--text-dark);
 }
-.item-block-text--selected{
+.item-block-icons--selected {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: auto 1fr 20px;
   justify-content: space-between;
   align-items: center;
   overflow-x: hidden;
@@ -174,24 +185,21 @@ overflow-x: hidden;
   color: var(--text-dark);
 }
 
-
-.item {  
+.item {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%
+  max-width: 100%;
+  justify-self: self-start;
 }
 
 .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;
+  top: -18px;
   cursor: text;
   white-space: nowrap;
   overflow: hidden;
@@ -199,9 +207,64 @@ overflow-x: hidden;
   max-width: calc(100% - 32px);
   color: var(--text-grey);
 }
+.label--default.lg {
+  font-size: 12px;
+}
+.label--default.md {
+  font-size: 10px;
+}
+
 .label--left {
-  font-size: 13px;
   color: var(--text-dark);
   min-width: fit-content;
 }
+.label--left.lg {
+  font-size: 14px;
+}
+.label--left.md {
+  font-size: 12px;
+}
+/* Стили для обязательного поля */
+.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;
+}
+
+.item-selected {
+  color: var(--text-dark);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-placeholder {
+  color: var(--text-grey);
+  transition: 0.3ms ease-out;
+}
 
+.helperText.md {
+  font-size: 10px;
+}
+
+.helperText.lg {
+  font-size: 12px;
+}
+.helperText {
+  position: absolute;
+  left: 0px;
+  bottom: -17px;
+  cursor: text;
+  transition: 0.3ms ease-out;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--error-main);
+}

package/dist/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { InputProps } from 'kamotive_ui';
+import { InputProps } from '../../types';
 /**
  * Компонент Input для создания текстовых полей ввода различных стилей и размеров.
  */

package/dist/components/Input/Input.js

@@ -1,37 +1,38 @@
 import React from 'react';
+;
 import styles from './Input.module.css';
 import classNames from 'classnames';
+import { Typography } from '../Typography/Typography';
 /**
  * Компонент Input для создания текстовых полей ввода различных стилей и размеров.
  */
-export const Input = ({ id, className, value, label, placeholder, size = 'md', onChange, icon, hasError = false, helperText, disabled = false, readOnly = false, isLeftLabel = false, multiline = false, resize = false, }) => {
-    const handleChange = (e) => {
-        if (onChange) {
-            onChange(e);
-        }
+export const Input = ({ id, label, placeholder, size = 'lg', value, className, multiline = false, rows = 4, resize = false, disabled = false, readOnly = false, isLeftLabel = false, icon, error = false, helperText, onChange, required = false, }) => {
+    const handleChange = (event) => {
+        event.stopPropagation();
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
     };
-    const wrapperClassess = classNames(styles['wrapper'], {
-        'wrapper--left': isLeftLabel,
+    const wrapperClassess = classNames(styles['wrapper--input'], {
+        [styles['wrapper--left']]: isLeftLabel,
+        [styles['wrapper--input-label']]: label && !isLeftLabel && !required,
+        [styles['wrapper--input-helperText']]: error,
     });
-    const inputWrapperClassess = classNames(styles['wrapper--input']);
-    const inputClassess = classNames(styles['inputText'], size, className, {
-        'input--error': hasError,
-        'readOnly': readOnly,
-        'input--withIcon': icon,
-        'textarea': multiline,
-        'resize': resize,
+    const inputClassess = classNames(styles.input, styles[size], className, {
+        [styles['input--error']]: error,
+        [styles['readOnly']]: readOnly,
+        [styles['input--withIcon']]: icon,
+        [styles['textarea']]: multiline,
+        // [styles['textarea-rows-&{rows}']]: multiline && rows,
+        [styles['resize']]: resize,
+        [styles['input--left']]: isLeftLabel,
     });
-    const labelClasses = classNames(styles['label'], {
-        'label--default': !isLeftLabel,
-        'label--left': isLeftLabel,
-    });
-    const iconClassess = classNames(styles['icon'], {
-        'input--withIcon': multiline,
+    const labelClasses = classNames(styles.label, styles[size], {
+        [styles['label--default']]: !isLeftLabel,
+        [styles['label--left']]: isLeftLabel,
+        [styles['label--required']]: required,
     });
     return (React.createElement("div", { className: wrapperClassess },
-        ((value && !isLeftLabel) || isLeftLabel) && (React.createElement("label", { className: labelClasses, htmlFor: id }, label)),
-        React.createElement("div", { className: inputWrapperClassess },
-            icon && React.createElement("div", { className: iconClassess }, icon),
-            multiline ? (React.createElement("textarea", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled })) : (React.createElement("input", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled, readOnly: readOnly }))),
-        hasError && helperText && React.createElement("div", { className: "helperText" }, helperText)));
+        label && (React.createElement(Typography, { variant: "Caption", className: labelClasses }, label)),
+        icon && React.createElement("div", { className: styles.icon }, icon),
+        multiline ? (React.createElement("textarea", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled, style: { height: `${rows * 20}px` } })) : (React.createElement("input", { id: id, className: inputClassess, value: value, placeholder: placeholder, onChange: handleChange, disabled: disabled, readOnly: readOnly })),
+        error && helperText && (React.createElement(Typography, { variant: "Caption", className: classNames(styles.helperText, styles[size]) }, helperText))));
 };

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/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) {

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