@vchasno/ui-kit 0.3.33 → 0.3.35

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 { DataQa, ErrorFeedback, LoadingFeedback, WithHint } from '../types';
+import { DataQa, ErrorFeedback, HideEmptyMeta, LoadingFeedback, WithHint } from '../types';
 import './DatePicker.global.css';
-export interface DatePickerProps extends ReactDatePickerProps, Partial<LoadingFeedback & WithHint & ErrorFeedback & DataQa> {
+export interface DatePickerProps extends ReactDatePickerProps, Partial<LoadingFeedback & WithHint & ErrorFeedback & DataQa & HideEmptyMeta> {
     label?: string;
     className?: string;
     showMask?: boolean;
@@ -11,6 +11,7 @@ export interface DatePickerProps extends ReactDatePickerProps, Partial<LoadingFe
     onChange: ReactDatePickerProps['onChange'];
     isClearable?: ReactDatePickerProps['isClearable'];
     dateFormat?: ReactDatePickerProps['dateFormat'];
+    wide?: boolean;
 }
 /**
  * @see <https://reactdatepicker.com/>

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

@@ -1,7 +1,7 @@
 import React, { InputHTMLAttributes } from 'react';
-import type { DataQa, ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import { DataQa, ErrorFeedback, HideEmptyMeta, LoadingFeedback, WithHint, WithLabel } from '../types';
 import './Input.global.css';
-export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa> {
+export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa & HideEmptyMeta> {
     className?: string;
     disabled?: boolean;
     required?: boolean;
@@ -9,7 +9,6 @@ export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedba
     startElement?: string | React.ReactElement;
     endElement?: string | React.ReactElement;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
-    hideEmptyMeta?: boolean;
     children: React.ReactHTMLElement<HTMLInputElement> | React.ReactElement | JSX.Element[];
 }
 export declare const Input: React.FC<InputProps>;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Props as ReactSelectProps } from 'react-select';
 import type { GroupBase } from 'react-select/dist/declarations/src/types';
-import { DataQa, ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import { DataQa, ErrorFeedback, HideEmptyMeta, 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 & DataQa> {
+export interface SelectProps extends ReactSelectProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa & HideEmptyMeta> {
     wide?: boolean;
 }
 declare const Select: React.FC<SelectProps>;

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

@@ -1,11 +1,11 @@
 import React, { InputHTMLAttributes } from 'react';
 import { CreatableProps } from 'react-select/creatable';
 import type { GroupBase } from 'react-select/dist/declarations/src/types';
-import { DataQa, ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import { DataQa, ErrorFeedback, HideEmptyMeta, 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 & DataQa> {
+export interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa & HideEmptyMeta> {
     wide?: boolean;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
 }

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

@@ -26,6 +26,10 @@ export interface DataQa {
     /** для тестування */
     dataQa?: string;
 }
+export interface HideEmptyMeta {
+    /** приховувати пустий блок під інпутом - якщо не має повідомлень щоб не займав місце */
+    hideEmptyMeta?: boolean;
+}
 export interface TextAlign {
     /** для центрування тексту **/
     textAlign?: 'center' | 'start' | 'end' | 'justify';

package/dist/css/DatePicker.global.css

@@ -575,6 +575,10 @@
     gap: 5px;
 }
 
+.vchasno-ui-date-picker.--wide {
+    width: 100%;
+}
+
 .vchasno-ui-date-picker .vchasno-ui-date-picker__picker {
     height: 50px;
 }

package/dist/css/Switch.global.css

@@ -35,7 +35,6 @@
 
 .vchasno-ui-switch__active .vchasno-ui-switch--bg {
     background: var(--vchasno-ui-switch-active-color-bg);
-    box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);
 }
 
 .vchasno-ui-switch__disabled {

package/dist/css/_theme.css

@@ -38,7 +38,7 @@
     --vchasno-ui-input-font-color-disabled: #b6cadb;
     --vchasno-ui-label-color-default: #6b8091;
     --vchasno-ui-label-color-focused: #6b5fff;
-    --vchasno-ui-checkbox-bg-color: #3069fe;
+    --vchasno-ui-checkbox-bg-color: #087dc1;
     --vchasno-ui-checkbox-outline-color: #d9eaff;
     --vchasno-ui-checkbox-disabled-bg: #b6cadb;
     --vchasno-ui-checkbox-border-color: #b6cadb;
@@ -72,7 +72,7 @@
     --vchasno-ui-switch-color-bg: #b6cadb;
     --vchasno-ui-switch-spinner-color: #b6cadb;
     --vchasno-ui-switch-circle-color: #fff;
-    --vchasno-ui-switch-active-color-bg: #00c5ff;
+    --vchasno-ui-switch-active-color-bg: #087dc1;
     --vchasno-ui-pulse-dot-color: #604adf;
     --vchasno-ui-pulse-dot-size: 35px;
     --vchasno-ui-menu-button-bg: #f3f6f8;
@@ -147,10 +147,6 @@
     --vchasno-ui-btn-primary-bg: #ffb200;
     --vchasno-ui-btn-primary-hover-bg: #ff9c01;
     --vchasno-ui-input-border-color-focused: #ffb200;
-
-    /* Checkbox */
-    --vchasno-ui-checkbox-bg-color: #1a66c8;
-    --vchasno-ui-checkbox-outline-color: #e0eeff;
     --vchasno-ui-select-menu-border-color: #ffb200;
     --vchasno-ui-calendar-color: #ffb200;
     --vchasno-ui-pagination-border-color: #ffb200;
@@ -168,10 +164,6 @@
     /* Button */
     --vchasno-ui-btn-primary-bg: #00c5ff;
     --vchasno-ui-btn-primary-hover-bg: #00aee2;
-
-    /* Checkbox */
-    --vchasno-ui-checkbox-bg-color: #00c5ff;
-    --vchasno-ui-checkbox-outline-color: #d8f4fc;
 }
 
 :root .vchasno-ui-kit-theme-kasa,
@@ -179,18 +171,10 @@
     /* Button */
     --vchasno-ui-btn-primary-bg: #e579ff;
     --vchasno-ui-btn-primary-hover-bg: #c055da;
-
-    /* Checkbox */
-    --vchasno-ui-checkbox-bg-color: #e579ff;
-    --vchasno-ui-checkbox-outline-color: #fbe6ff;
 }
 
 :root .vchasno-ui-kit-theme-kep {
     /* Button */
     --vchasno-ui-btn-primary-bg: #ff5a5f;
     --vchasno-ui-btn-primary-hover-bg: #e75459;
-
-    /* Checkbox */
-    --vchasno-ui-checkbox-bg-color: #47a0e4;
-    --vchasno-ui-checkbox-outline-color: #e0f1ff;
 }

package/dist/index.d.ts

@@ -33,6 +33,10 @@ interface DataQa {
     /** для тестування */
     dataQa?: string;
 }
+interface HideEmptyMeta {
+    /** приховувати пустий блок під інпутом - якщо не має повідомлень щоб не займав місце */
+    hideEmptyMeta?: boolean;
+}
 interface TextAlign {
     /** для центрування тексту **/
     textAlign?: 'center' | 'start' | 'end' | 'justify';
@@ -61,7 +65,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 & DataQa> {
+interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa & HideEmptyMeta> {
     className?: string;
     disabled?: boolean;
     required?: boolean;
@@ -69,7 +73,6 @@ interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & Er
     startElement?: string | React.ReactElement;
     endElement?: string | React.ReactElement;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
-    hideEmptyMeta?: boolean;
     children: React.ReactHTMLElement<HTMLInputElement> | React.ReactElement | JSX.Element[];
 }
 declare const Input: React.FC<InputProps>;

package/dist/index.js

@@ -312,8 +312,8 @@ var css_248z$h = ".vchasno-ui-mask-input {\n    position: relative;\n    font-si
 styleInject(css_248z$h);
 
 var MaskInput = function (_a) {
-    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, inputClassName = _a.inputClassName, labelProps = _a.labelProps, dataQa = _a.dataQa, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps", "dataQa"]);
-    return (React$1.createElement(Input, { dataQa: dataQa, required: required, wide: wide, className: className, loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, labelProps: labelProps, startElement: startElement },
+    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, inputClassName = _a.inputClassName, labelProps = _a.labelProps, _b = _a.hideEmptyMeta, hideEmptyMeta = _b === void 0 ? false : _b, dataQa = _a.dataQa, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps", "hideEmptyMeta", "dataQa"]);
+    return (React$1.createElement(Input, { dataQa: dataQa, required: required, wide: wide, hideEmptyMeta: hideEmptyMeta, className: className, loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, labelProps: labelProps, startElement: startElement },
         React$1.createElement(MaskedInput, __assign({}, rest, { required: required, disabled: disabled, className: cn('vchasno-ui-mask-input', inputClassName) }))));
 };
 
@@ -2872,8 +2872,8 @@ var css_248z$a = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrappe
 styleInject(css_248z$a);
 
 var TextAreaInput = React$1.forwardRef(function (_a, ref) {
-    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, minRows = _a.minRows, maxRows = _a.maxRows, textareaClassName = _a.textareaClassName, labelProps = _a.labelProps, dataQa = _a.dataQa, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "minRows", "maxRows", "textareaClassName", "labelProps", "dataQa"]);
-    return (React$1.createElement(Input, { dataQa: dataQa, required: required, wide: wide, className: cn(className, 'vchasno-ui-textarea-input-container'), loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, labelProps: labelProps, startElement: startElement },
+    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, minRows = _a.minRows, maxRows = _a.maxRows, textareaClassName = _a.textareaClassName, labelProps = _a.labelProps, dataQa = _a.dataQa, hideEmptyMeta = _a.hideEmptyMeta, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "minRows", "maxRows", "textareaClassName", "labelProps", "dataQa", "hideEmptyMeta"]);
+    return (React$1.createElement(Input, { dataQa: dataQa, required: required, wide: wide, hideEmptyMeta: hideEmptyMeta, className: cn(className, 'vchasno-ui-textarea-input-container'), loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, labelProps: labelProps, startElement: startElement },
         React$1.createElement(TextareaAutosize, __assign({}, rest, { ref: ref, minRows: minRows, maxRows: maxRows, required: required, disabled: disabled, className: cn('vchasno-ui-textarea-input', textareaClassName) }))));
 });
 TextAreaInput.displayName = 'TextAreaInput';
@@ -2921,7 +2921,7 @@ var Alert = function (_a) {
         closeNode));
 };
 
-var css_248z$8 = ".vchasno-ui-switch {\n    --vchasno-ui-switc-hcircle-size: calc(var(--vchasno-ui-switch-height) - 4px);\n\n    display: inline-flex;\n    align-content: center;\n    cursor: pointer;\n    line-height: var(--vchasno-ui-switch-height);\n}\n\n.vchasno-ui-switch.--sm {\n    --vchasno-ui-switch-height: 20px;\n}\n\n.vchasno-ui-switch.--md {\n    --vchasno-ui-switch-height: 30px;\n}\n\n.vchasno-ui-switch.--lg {\n    --vchasno-ui-switch-height: 40px;\n}\n\n.vchasno-ui-switch--bg {\n    position: relative;\n    z-index: 0;\n    display: inline-flex;\n    height: var(--vchasno-ui-switch-height, 20px);\n    box-sizing: border-box;\n    flex-shrink: 0;\n    border-radius: 100px;\n    aspect-ratio: 36/20;\n    background: var(--vchasno-ui-switch-color-bg);\n    box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n    transition: background-color 0.3s;\n}\n\n.vchasno-ui-switch__active .vchasno-ui-switch--bg {\n    background: var(--vchasno-ui-switch-active-color-bg);\n    box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n}\n\n.vchasno-ui-switch__disabled {\n    cursor: default;\n    opacity: 0.7;\n}\n\n.vchasno-ui-switch--circle {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--vchasno-ui-switc-hcircle-size);\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    aspect-ratio: 1/1;\n    background-color: var(--vchasno-ui-switch-circle-color);\n    transform: translate(2px, 2px);\n    transition: transform 0.3s;\n}\n\n.vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n    transform: translate(18px, 2px);\n}\n\n.vchasno-ui-switch.--md .vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n    transform: translate(26px, 2px);\n}\n\n.vchasno-ui-switch.--lg .vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n    transform: translate(34px, 2px);\n}\n\n.vchasno-ui-spinner {\n    color: var(--vchasno-ui-switch-spinner-color);\n}\n\n.vchasno-ui-switch--label {\n    margin-left: 12px;\n    color: var(--vchasno-ui-input-font-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    user-select: none;\n}\n";
+var css_248z$8 = ".vchasno-ui-switch {\n    --vchasno-ui-switc-hcircle-size: calc(var(--vchasno-ui-switch-height) - 4px);\n\n    display: inline-flex;\n    align-content: center;\n    cursor: pointer;\n    line-height: var(--vchasno-ui-switch-height);\n}\n\n.vchasno-ui-switch.--sm {\n    --vchasno-ui-switch-height: 20px;\n}\n\n.vchasno-ui-switch.--md {\n    --vchasno-ui-switch-height: 30px;\n}\n\n.vchasno-ui-switch.--lg {\n    --vchasno-ui-switch-height: 40px;\n}\n\n.vchasno-ui-switch--bg {\n    position: relative;\n    z-index: 0;\n    display: inline-flex;\n    height: var(--vchasno-ui-switch-height, 20px);\n    box-sizing: border-box;\n    flex-shrink: 0;\n    border-radius: 100px;\n    aspect-ratio: 36/20;\n    background: var(--vchasno-ui-switch-color-bg);\n    box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n    transition: background-color 0.3s;\n}\n\n.vchasno-ui-switch__active .vchasno-ui-switch--bg {\n    background: var(--vchasno-ui-switch-active-color-bg);\n}\n\n.vchasno-ui-switch__disabled {\n    cursor: default;\n    opacity: 0.7;\n}\n\n.vchasno-ui-switch--circle {\n    position: absolute;\n    top: 0;\n    left: 0;\n    display: flex;\n    height: var(--vchasno-ui-switc-hcircle-size);\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    aspect-ratio: 1/1;\n    background-color: var(--vchasno-ui-switch-circle-color);\n    transform: translate(2px, 2px);\n    transition: transform 0.3s;\n}\n\n.vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n    transform: translate(18px, 2px);\n}\n\n.vchasno-ui-switch.--md .vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n    transform: translate(26px, 2px);\n}\n\n.vchasno-ui-switch.--lg .vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n    transform: translate(34px, 2px);\n}\n\n.vchasno-ui-spinner {\n    color: var(--vchasno-ui-switch-spinner-color);\n}\n\n.vchasno-ui-switch--label {\n    margin-left: 12px;\n    color: var(--vchasno-ui-input-font-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    user-select: none;\n}\n";
 styleInject(css_248z$8);
 
 var spinnerSizeMap = {