@vchasno/ui-kit 0.3.29 → 0.3.30

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import { DataQa } from '../types';
 import './Alert.global.css';
 type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
 type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
-export interface AlertProps {
+export interface AlertProps extends DataQa {
     type?: AlertType;
     icon?: IconType;
     customIcon?: React.ReactNode;

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

@@ -1,8 +1,8 @@
 import React, { ButtonHTMLAttributes } from 'react';
-import { LoadingFeedback, Sizable } from '../types';
+import { DataQa, LoadingFeedback, Sizable } from '../types';
 import './Button.global.css';
 type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable & LoadingFeedback & DataQa> {
     className?: string;
     theme?: ButtonTheme;
     outline?: boolean;

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

@@ -1,7 +1,7 @@
 import React, { InputHTMLAttributes } from 'react';
-import type { LoadingFeedback } from '../types';
+import type { DataQa, LoadingFeedback } from '../types';
 import './Checkbox.global.css';
-export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback & DataQa> {
     className?: string;
     label?: string;
     disabled?: boolean;

package/dist/Snackbar/types/components/Datepicker/DatePicker.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { ReactDatePickerProps } from 'react-datepicker';
 import { MaskedInputProps } from 'react-text-mask';
-import type { ErrorFeedback, LoadingFeedback, WithHint } from '../types';
+import type { DataQa, ErrorFeedback, LoadingFeedback, WithHint } from '../types';
 import './DatePicker.global.css';
-export interface DatePickerProps extends ReactDatePickerProps, Partial<LoadingFeedback & WithHint & ErrorFeedback> {
+export interface DatePickerProps extends ReactDatePickerProps, Partial<LoadingFeedback & WithHint & ErrorFeedback & DataQa> {
     label?: string;
     className?: string;
     showMask?: boolean;

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

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from 'react';
+import { DataQa } from '../types';
 import './FlexBox.css';
-export interface FlexBoxProps extends HTMLAttributes<HTMLElement> {
+export interface FlexBoxProps extends HTMLAttributes<HTMLElement>, DataQa {
     className?: string;
     tagName?: keyof HTMLElementTagNameMap;
     direction?: React.CSSProperties['flexDirection'];

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

@@ -1,7 +1,7 @@
 import React, { InputHTMLAttributes } from 'react';
-import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import type { DataQa, ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
 import './Input.global.css';
-export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa> {
     className?: string;
     disabled?: boolean;
     required?: boolean;

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

@@ -1,8 +1,9 @@
 import React, { InputHTMLAttributes } from 'react';
 import { MaskedInputProps } from 'react-text-mask';
 import { InputProps } from '../Input';
+import { DataQa } from '../types';
 import './MaskInput.global.css';
-export interface MaskInputProps extends MaskedInputProps, Omit<InputProps, 'children'> {
+export interface MaskInputProps extends MaskedInputProps, Omit<InputProps, 'children'>, DataQa {
     inputClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
 }

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

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes } from 'react';
-import { EllipsisText, TextAlign } from '../types';
+import { DataQa, EllipsisText, TextAlign } from '../types';
 import '../../styles/typography.global.css';
 import './Paragraph.global.css';
-export interface ParagraphProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLParagraphElement> {
+export interface ParagraphProps extends EllipsisText, TextAlign, DataQa, HTMLAttributes<HTMLParagraphElement> {
     className?: string;
     children: React.ReactNode;
     ellipsisLine?: number;

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

@@ -1,13 +1,12 @@
 import React from 'react';
 import { Props as ReactSelectProps } from 'react-select';
 import type { GroupBase } from 'react-select/dist/declarations/src/types';
-import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import { DataQa, ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
 import { Option } from './types';
 import './Select.global.css';
 export type SelectOption = Option;
-export interface SelectProps extends ReactSelectProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+export interface SelectProps extends ReactSelectProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa> {
     wide?: boolean;
-    dataQa?: string;
 }
 declare const Select: React.FC<SelectProps>;
 export declare const SelectComponents: {

package/dist/Snackbar/types/components/Select/SelectCreatable.d.ts

@@ -1,14 +1,13 @@
 import React, { InputHTMLAttributes } from 'react';
 import { CreatableProps } from 'react-select/creatable';
 import type { GroupBase } from 'react-select/dist/declarations/src/types';
-import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import { DataQa, ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
 import { Option } from './types';
 import './Select.global.css';
 export type SelectOption = Option;
-export interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+export interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa> {
     wide?: boolean;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
-    dataQa?: string;
 }
 declare const SelectCreatable: React.FC<SelectCreatableProps>;
 export default SelectCreatable;

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

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
-import { LoadingFeedback, Sizable } from '../types';
+import { DataQa, LoadingFeedback, Sizable } from '../types';
 import './Switch.global.css';
-export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback>, Partial<Sizable> {
+export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, DataQa, Partial<LoadingFeedback>, Partial<Sizable> {
     className?: string;
     label?: string;
     value?: boolean;

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

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
-import { EllipsisText, TextType } from '../types';
+import { DataQa, EllipsisText, TextType } from '../types';
 import './Text.global.css';
-export interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText {
+export interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText, DataQa {
     type?: TextType;
     code?: boolean;
     underline?: boolean;

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

@@ -1,7 +1,8 @@
 import React, { InputHTMLAttributes } from 'react';
 import { InputProps } from '../Input';
+import { DataQa } from '../types';
 import './TextAreaInput.global.css';
-export interface TextAreaInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'>, Omit<InputProps, 'children'> {
+export interface TextAreaInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'>, Omit<InputProps, 'children'>, DataQa {
     textareaClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
     minRows?: number;

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

@@ -1,7 +1,8 @@
 import React, { InputHTMLAttributes } from 'react';
 import type { InputProps } from '../Input';
+import { DataQa } from '../types';
 import './TextInput.global.css';
-export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>, Omit<InputProps, 'children'> {
+export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>, Omit<InputProps, 'children'>, DataQa {
     inputClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
 }

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

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes } from 'react';
-import { EllipsisText, TextAlign } from '../types';
+import { DataQa, EllipsisText, TextAlign } from '../types';
 import '../../styles/typography.global.css';
 import './Title.global.css';
-export interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement> {
+export interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement>, DataQa {
     level?: 1 | 2 | 3 | 4 | 5;
     className?: string;
     pretty?: boolean;

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

@@ -22,6 +22,10 @@ export interface EllipsisText {
     /** для скорочення тексту і виведення 3 точок */
     ellipsis?: boolean;
 }
+export interface DataQa {
+    /** для тестування */
+    dataQa?: string;
+}
 export interface TextAlign {
     /** для центрування тексту **/
     textAlign?: 'center' | 'start' | 'end' | 'justify';

package/dist/css/Button.global.css

@@ -11,6 +11,8 @@
     font-weight: 700;
     gap: 5px;
     transition:
+        min-height var(--vchasno-ui-transition-duration-sec, 0.3s),
+        padding var(--vchasno-ui-transition-duration-sec, 0.3s),
         background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
         color var(--vchasno-ui-transition-duration-sec, 0.3s);
     user-select: none;
@@ -33,14 +35,14 @@
 }
 
 .vchasno-ui-button.--md {
-    min-width: 145px;
-    padding: 0 20px;
+    min-width: 40px;
+    padding: 0 24px;
 }
 
 .vchasno-ui-button.--lg {
-    min-width: 200px;
+    min-width: 50px;
     min-height: 50px;
-    padding: 0 20px;
+    padding: 0 32px;
 }
 
 .vchasno-ui-button.--wide {
@@ -61,15 +63,23 @@
 }
 
 .vchasno-ui-button.--secondary {
+    border: 1px solid var(--vchasno-ui-btn-secondary-border-color);
     background-color: var(--vchasno-ui-btn-secondary-bg);
     color: var(--vchasno-ui-btn-secondary-color);
 }
 
 .vchasno-ui-button:disabled.--primary,
 .vchasno-ui-button:disabled.--secondary {
-    border-color: #b6cadb;
     background-color: #b6cadb;
-    color: var(--vchasno-ui-btn-primary-color);
+    color: var(--vchasno-ui-btn-disabled-color);
+}
+
+.vchasno-ui-button:disabled.--primary {
+    background-color: var(--vchasno-ui-btn-primary-disabled-bg);
+}
+
+.vchasno-ui-button:disabled.--secondary {
+    background-color: var(--vchasno-ui-btn-secondary-disabled-bg);
 }
 
 .vchasno-ui-button.--primary:not(:disabled):hover {
@@ -96,7 +106,6 @@
 }
 
 .vchasno-ui-button.--secondary.--outline:not(:disabled):hover {
-    border: 1px solid var(--vchasno-ui-btn-secondary-bg);
     background-color: rgb(0 0 0 / 10%);
     color: var(--vchasno-ui-btn-secondary-bg);
 }

package/dist/css/_theme.css

@@ -3,15 +3,19 @@
     --vchasno-ui-btn-default-bg: transparent;
     --vchasno-ui-btn-default-hover-bg: #e1e4ff;
     --vchasno-ui-btn-default-color: #6b8091;
+    --vchasno-ui-btn-disabled-color: #b6cadb;
     --vchasno-ui-btn-default-hover-color: #604adf;
     --vchasno-ui-btn-primary-bg: #604adf;
+    --vchasno-ui-btn-primary-disabled-bg: #dbe5ea;
     --vchasno-ui-btn-primary-hover-bg: #3f328c;
     --vchasno-ui-btn-primary-color: #fff;
-    --vchasno-ui-btn-secondary-bg: #ffb200;
+    --vchasno-ui-btn-secondary-bg: rgb(255 255 255 / 4%);
+    --vchasno-ui-btn-secondary-disabled-bg: #f3f6f8;
     --vchasno-ui-btn-pink-bg: #ff9498;
     --vchasno-ui-btn-pink-hover-bg: #f4736f;
-    --vchasno-ui-btn-secondary-hover-bg: #f39300;
-    --vchasno-ui-btn-secondary-color: #fff;
+    --vchasno-ui-btn-secondary-border-color: #dbe5ea;
+    --vchasno-ui-btn-secondary-hover-bg: #ecf4ff;
+    --vchasno-ui-btn-secondary-color: #087dc1;
     --vchasno-ui-btn-light-bg: #fff;
     --vchasno-ui-btn-light-hover-bg: rgb(96 74 223 / 20%);
     --vchasno-ui-btn-light-color: #604adf;
@@ -136,3 +140,39 @@
     --vchasno-ui-snackbar-color-progress-bgo: 0.2;
     --vchasno-ui-snackbar-action-button-color: #0094ff;
 }
+
+:root .vchasno-ui-kit-theme-edo {
+    --vchasno-ui-btn-primary-bg: #ffb200;
+    --vchasno-ui-btn-primary-hover-bg: #ff9c01;
+    --vchasno-ui-input-border-color-focused: #ffb200;
+    --vchasno-ui-checkbox-bg-color: #ffb200;
+    --vchasno-ui-checkbox-outline-color: #fff0ce;
+    --vchasno-ui-select-menu-border-color: #ffb200;
+    --vchasno-ui-calendar-color: #ffb200;
+    --vchasno-ui-pagination-border-color: #ffb200;
+    --vchasno-ui-input-outline-color-focused: #fbf4ea;
+    --vchasno-ui-input-border-color-default: #dbe5ea;
+    --vchasno-ui-label-color-default: #6b8091;
+    --vchasno-ui-label-color-focused: #6b8091;
+    --vchasno-ui-input-font-size: 13px;
+    --vchasno-ui-input-font-color: #333;
+    --vchasno-ui-text-primary-color: #333;
+    --vchasno-ui-input-bg-color: #fff;
+    --vchasno-ui-checkbox-font-size: 13px;
+}
+
+:root .vchasno-ui-kit-theme-edi {
+    --vchasno-ui-btn-primary-bg: #00c5ff;
+    --vchasno-ui-btn-primary-hover-bg: #00aee2;
+}
+
+:root .vchasno-ui-kit-theme-kasa,
+:root .vchasno-ui-kit-theme-dm {
+    --vchasno-ui-btn-primary-bg: #e579ff;
+    --vchasno-ui-btn-primary-hover-bg: #c055da;
+}
+
+:root .vchasno-ui-kit-theme-kep {
+    --vchasno-ui-btn-primary-bg: #ff5a5f;
+    --vchasno-ui-btn-primary-hover-bg: #e75459;
+}

package/dist/index.d.ts

@@ -5,19 +5,6 @@ import * as _mui_system from '@mui/system';
 import * as _mui_material_styles from '@mui/material/styles';
 import { TooltipProps } from '@mui/material/Tooltip';
 
-interface FlexBoxProps extends HTMLAttributes<HTMLElement> {
-    className?: string;
-    tagName?: keyof HTMLElementTagNameMap;
-    direction?: React.CSSProperties['flexDirection'];
-    gap?: number;
-    grow?: React.CSSProperties['flexGrow'];
-    shrink?: React.CSSProperties['flexShrink'];
-    wrap?: React.CSSProperties['flexWrap'];
-    align?: React.CSSProperties['alignItems'];
-    justify?: React.CSSProperties['justifyContent'];
-}
-declare const FlexBox: React.ForwardRefExoticComponent<FlexBoxProps & React.RefAttributes<HTMLElement>>;
-
 interface Sizable {
     size: 'sm' | 'md' | 'lg';
 }
@@ -42,14 +29,31 @@ interface EllipsisText {
     /** для скорочення тексту і виведення 3 точок */
     ellipsis?: boolean;
 }
+interface DataQa {
+    /** для тестування */
+    dataQa?: string;
+}
 interface TextAlign {
     /** для центрування тексту **/
     textAlign?: 'center' | 'start' | 'end' | 'justify';
 }
 type VchasnoProduct = 'edo' | 'kep' | 'kasa' | 'edi' | 'ttn' | 'dm';
 
+interface FlexBoxProps extends HTMLAttributes<HTMLElement>, DataQa {
+    className?: string;
+    tagName?: keyof HTMLElementTagNameMap;
+    direction?: React.CSSProperties['flexDirection'];
+    gap?: number;
+    grow?: React.CSSProperties['flexGrow'];
+    shrink?: React.CSSProperties['flexShrink'];
+    wrap?: React.CSSProperties['flexWrap'];
+    align?: React.CSSProperties['alignItems'];
+    justify?: React.CSSProperties['justifyContent'];
+}
+declare const FlexBox: React.ForwardRefExoticComponent<FlexBoxProps & React.RefAttributes<HTMLElement>>;
+
 type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable & LoadingFeedback & DataQa> {
     className?: string;
     theme?: ButtonTheme;
     outline?: boolean;
@@ -57,7 +61,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<S
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa> {
     className?: string;
     disabled?: boolean;
     required?: boolean;
@@ -75,7 +79,7 @@ interface InputMetaProps extends Partial<WithHint & ErrorFeedback> {
 }
 declare const InputMeta: React.FC<InputMetaProps>;
 
-interface MaskInputProps extends MaskedInputProps, Omit<InputProps, 'children'> {
+interface MaskInputProps extends MaskedInputProps, Omit<InputProps, 'children'>, DataQa {
     inputClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
 }
@@ -95,13 +99,13 @@ interface PaginationProps {
 }
 declare const Pagination: React.FC<PaginationProps>;
 
-interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>, Omit<InputProps, 'children'> {
+interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>, Omit<InputProps, 'children'>, DataQa {
     inputClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
 }
 declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 
-interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText {
+interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText, DataQa {
     type?: TextType;
     code?: boolean;
     underline?: boolean;
@@ -112,21 +116,21 @@ interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText {
 }
 declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
 
-interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement> {
+interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement>, DataQa {
     level?: 1 | 2 | 3 | 4 | 5;
     className?: string;
     pretty?: boolean;
 }
 declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
 
-interface ParagraphProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLParagraphElement> {
+interface ParagraphProps extends EllipsisText, TextAlign, DataQa, HTMLAttributes<HTMLParagraphElement> {
     className?: string;
     children: React.ReactNode;
     ellipsisLine?: number;
 }
 declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLParagraphElement>>;
 
-interface TextAreaInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'>, Omit<InputProps, 'children'> {
+interface TextAreaInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'>, Omit<InputProps, 'children'>, DataQa {
     textareaClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
     minRows?: number;
@@ -136,7 +140,7 @@ declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps
 
 type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
 type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
-interface AlertProps {
+interface AlertProps extends DataQa {
     type?: AlertType;
     icon?: IconType;
     customIcon?: React.ReactNode;
@@ -167,7 +171,7 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare const Spinner: React.FC<SpinnerProps>;
 
-interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback>, Partial<Sizable> {
+interface SwitchProps extends HTMLAttributes<HTMLInputElement>, DataQa, Partial<LoadingFeedback>, Partial<Sizable> {
     className?: string;
     label?: string;
     value?: boolean;
@@ -195,7 +199,7 @@ interface TabsProps<T> {
 }
 declare const Tabs: <T extends string>({ onChange, items, defaultActiveKey, activeTab, className, isPending, }: TabsProps<T>) => React.JSX.Element;
 
-interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback & DataQa> {
     className?: string;
     label?: string;
     disabled?: boolean;