@vchasno/ui-kit 0.3.33 → 0.3.35

package/dist/SelectCreatable/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/SelectCreatable/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/SelectCreatable/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/SelectCreatable/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/SelectCreatable/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/Snackbar/index.cjs.js

@@ -2793,8 +2793,8 @@ var css_248z$c = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrappe
 styleInject(css_248z$c);
 
 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';
@@ -2802,7 +2802,7 @@ TextAreaInput.displayName = 'TextAreaInput';
 var css_248z$b = ".vchasno-ui-alert {\n    display: inline-flex;\n    min-height: 40px;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    align-items: center;\n    padding: 12px 16px;\n    border-radius: 4px;\n    border-left: 3px solid transparent;\n    font-size: 14px;\n    gap: 12px;\n    line-height: 20px;\n}\n\n.vchasno-ui-alert strong,\n.vchasno-ui-alert b {\n    font-weight: 700;\n}\n\n.vchasno-ui-alert.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n    border-left-width: 4px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n    display: flex;\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    font-size: 20px;\n    line-height: 20px;\n}\n\n.vchasno-ui-alert.--info {\n    border-color: var(--vchasno-ui-alert-info-color, #006be9);\n    background-color: var(--vchasno-ui-alert-info-bg, #ecf4ff);\n}\n\n.vchasno-ui-alert.--warning {\n    border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n    background-color: var(--vchasno-ui-alert-warning-bg, #fff2d6);\n}\n\n.vchasno-ui-alert.--error {\n    border-color: var(--vchasno-ui-alert-error-color, #e73434);\n    background-color: var(--vchasno-ui-alert-error-bg, #ffeded);\n}\n\n.vchasno-ui-alert.--success {\n    border-color: var(--vchasno-ui-alert-success-color, #00b700);\n    background-color: var(--vchasno-ui-alert-success-bg, #e7f3d9);\n}\n\n.vchasno-ui-alert.--config {\n    border-color: var(--vchasno-ui-alert-config-color, #006be9);\n    background-color: var(--vchasno-ui-alert-config-bg, #f3f6f8);\n}\n\n.vchasno-ui-alert__close-icon {\n    width: 30px;\n    height: 30px;\n    border-radius: 4px;\n    transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n    background-color: rgb(255 255 255 / 50%);\n    cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n    display: none;\n}\n";
 styleInject(css_248z$b);
 
-var css_248z$a = ".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$a = ".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$a);
 
 var spinnerSizeMap = {