@vchasno/ui-kit 0.3.28 → 0.3.29

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { ClearIndicatorProps, DropdownIndicatorProps } from 'react-select';
+import { ClearIndicatorProps, DropdownIndicatorProps, MultiValueRemoveProps } from 'react-select';
 declare const _default: {
+    MultiValueRemove: (props: MultiValueRemoveProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
     DropdownIndicator: (props: DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
     LoadingIndicator: () => React.JSX.Element;
     IndicatorSeparator: () => null;

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

@@ -5,6 +5,7 @@ import './Title.global.css';
 export interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5;
     className?: string;
+    pretty?: boolean;
 }
 export declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
 export default Title;

package/dist/css/DatePicker.global.css

@@ -3,6 +3,22 @@
     left: 50px;
 }
 
+.react-datepicker-popper[data-placement^='bottom'] {
+    margin-top: -6px;
+}
+
+.react-datepicker-popper[data-placement^='top'] {
+    margin-top: 6px;
+}
+
+.react-datepicker-popper[data-placement^='right'] {
+    margin-left: -6px;
+}
+
+.react-datepicker-popper[data-placement^='left'] {
+    margin-left: 6px;
+}
+
 .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,
 .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,
 .react-datepicker__year-read-view--down-arrow,
@@ -45,7 +61,7 @@
 .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,
 .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {
     border-top: none;
-    border-bottom-color: #fff;
+    border-bottom-color: var(--vchasno-ui-input-bg-color);
 }
 
 .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {
@@ -60,7 +76,7 @@
     display: block;
     width: 7px;
     height: 7px;
-    background-color: #fff;
+    background-color: var(--vchasno-ui-input-bg-color);
     content: '';
     transform: rotate(45deg);
 }
@@ -78,7 +94,7 @@
 .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,
 .react-datepicker__year-read-view--down-arrow::before,
 .react-datepicker__month-read-view--down-arrow::before {
-    border-top-color: #fff;
+    border-top-color: var(--vchasno-ui-input-bg-color);
     border-bottom: none;
 }
 
@@ -96,7 +112,7 @@
     display: block;
     width: 7px;
     height: 7px;
-    background-color: #fff;
+    background-color: var(--vchasno-ui-input-bg-color);
     content: '';
     transform: rotate(45deg);
 }
@@ -107,7 +123,7 @@
     padding: 10px;
     border: 1px solid var(--vchasno-ui-calendar-color);
     border-radius: 8px;
-    background-color: #fff;
+    background-color: var(--vchasno-ui-input-bg-color);
     color: var(--vchasno-ui-input-font-color);
     font-size: 0.8rem;
 }
@@ -162,6 +178,7 @@
     height: 30px;
     padding: 5px 10px;
     border-radius: 8px;
+    line-height: 20px;
     white-space: nowrap;
 }
 
@@ -239,27 +256,11 @@
     z-index: 100;
 }
 
-.react-datepicker-popper[data-placement^='bottom'] {
-    margin-top: 8px;
-}
-
-.react-datepicker-popper[data-placement^='top'] {
-    margin-bottom: 8px;
-}
-
-.react-datepicker-popper[data-placement^='right'] {
-    margin-left: 6px;
-}
-
 .react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {
     right: 42px;
     left: auto;
 }
 
-.react-datepicker-popper[data-placement^='left'] {
-    margin-right: 6px;
-}
-
 .react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {
     right: auto;
     left: 42px;
@@ -392,17 +393,39 @@
     top: 0;
     right: 35px;
     bottom: 0;
-    width: 10px;
-    height: 10px;
+    width: 20px;
+    height: 20px;
     border: 0;
     margin: auto;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIGZpbGw9IiNiNmNhZGIiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTM4LjEsMzIuNEw2My4zLDcuM2MxLjYtMS42LDEuNi00LjIsMC01LjdjLTEuNi0xLjYtNC4yLTEuNi01LjcsMEwzMi40LDI2LjdMNy4zLDEuNkM1LjcsMCwzLjEsMCwxLjUsMS42cy0xLjYsNC4yLDAsNS43bDI1LjEsMjUuMUwxLjUsNTcuNmMtMS42LDEuNi0xLjYsNC4yLDAsNS43YzAuOCwwLjgsMS44LDEuMiwyLjksMS4yczIuMS0wLjQsMi45LTEuMmwyNS4xLTI1LjFsMjUuMSwyNS4xYzAuOCwwLjgsMS44LDEuMiwyLjksMS4yYzEsMCwyLjEtMC40LDIuOS0xLjJjMS42LTEuNiwxLjYtNC4yLDAtNS43TDM4LjEsMzIuNHoiLz48L3N2Zz4=');
-    background-repeat: no-repeat;
-    background-size: contain;
+    background-color: transparent;
     cursor: pointer;
     outline: none;
 }
 
+.vchasno-ui-date-picker__wrapper .vchasno-ui-date-picker__custom-close-icon {
+    position: absolute;
+    top: 50%;
+    right: 35px;
+    width: 20px;
+    height: 20px;
+    color: var(--vchasno-ui-input-border-color-default);
+    pointer-events: none;
+    transform: translateY(-50%) scale(0);
+    transition:
+        color var(--vchasno-ui-transition-duration-sec, 0.3s),
+        transform var(--vchasno-ui-transition-duration-sec, 0.3s);
+}
+
+.vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon)
+    .vchasno-ui-date-picker__custom-close-icon {
+    transform: translateY(-50%) scale(1);
+}
+
+.vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon:hover)
+    .vchasno-ui-date-picker__custom-close-icon {
+    color: var(--vchasno-ui-calendar-color);
+}
+
 .react-datepicker__today-button {
     padding: 5px 0;
     border-top: 1px solid #aeaeae;
@@ -518,7 +541,7 @@
     border: 1px solid var(--vchasno-ui-input-border-color-default, #b6cadb);
     border-radius: 8px;
     appearance: none;
-    background: #fff;
+    background: var(--vchasno-ui-input-bg-color);
     font-size: var(--vchasno-ui-input-font-size, 0.8rem);
     line-height: calc(var(--vchasno-ui-input-font-size, 0.8rem) * 2);
     outline: 1px solid transparent;
@@ -566,7 +589,7 @@
     font-size: 12px;
 }
 
-.vchasno-ui-date-picker__wrapper > svg {
+.vchasno-ui-date-picker__wrapper > .vchasno-ui-date-picker__custom-calendar-icon {
     position: absolute;
     top: 50%;
     right: 10px;
@@ -575,7 +598,9 @@
     transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
 }
 
-label[class^='vchasno-ui-']:focus-within .vchasno-ui-date-picker__wrapper > svg {
+label[class^='vchasno-ui-']:focus-within
+    .vchasno-ui-date-picker__wrapper
+    > .vchasno-ui-date-picker__custom-calendar-icon {
     color: var(--vchasno-ui-calendar-color);
 }
 

package/dist/css/Input.global.css

@@ -45,6 +45,7 @@
     flex-grow: 0;
     flex-shrink: 0;
     align-items: center;
+    margin-right: 5px;
     font-size: var(--vchasno-ui-input-font-size, 14px);
     line-height: var(--vchasno-ui-input-font-size, 14px);
 }

package/dist/css/Select.global.css

@@ -88,7 +88,7 @@
 .vchasno-ui-select
     .vchasno-ui-select__control--menu-is-open
     .vchasno-ui-select__dropdown-indicator {
-    color: var(--vchasno-ui-select-menu-border-color, #6b5fff);
+    color: var(--vchasno-ui-input-border-color-focused, #6b5fff);
     transition:
         background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
         color var(--vchasno-ui-transition-duration-sec, 0.3s);
@@ -136,23 +136,13 @@
 }
 
 .vchasno-ui-select .vchasno-ui-select__clear-indicator {
-    padding: 3px;
-    border-radius: 3px;
+    padding: 0;
+    border-radius: 4px;
     color: var(--vchasno-ui-input-font-color);
-    outline: 3px solid transparent;
-    transition:
-        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),
-        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);
 }
 
 .vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {
-    background-color: rgb(0 0 0 / 10%);
     cursor: pointer;
-    outline-color: rgb(0 0 0 / 10%);
-}
-
-.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {
-    transform: scale(0.6);
 }
 
 .vchasno-ui-select .vchasno-ui-select__option--is-selected,
@@ -180,19 +170,21 @@
     padding: 0;
     padding-right: 3px;
     background-color: transparent;
+    color: var(--vchasno-ui-label-color-default);
     transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
 }
 
-.vchasno-ui-select .vchasno-ui-select__multi-value__remove svg {
-    width: 16px;
-    height: 16px;
-}
-
 .vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {
     background-color: transparent;
+    color: var(--vchasno-ui-input-color-error);
     cursor: pointer;
 }
 
+.vchasno-ui-select .vchasno-ui-select__multi-value__remove svg {
+    width: 20px;
+    height: 20px;
+}
+
 .vchasno-ui-select .vchasno-ui-select__indicators {
     padding-right: 5px;
 }
@@ -202,7 +194,7 @@
 }
 
 .vchasno-ui-select .vchasno-ui-select__multi-value__label {
-    padding: 6px;
+    padding: 6px 0 6px 6px;
     font-size: 14px;
 }
 

package/dist/css/Title.global.css

@@ -2,6 +2,10 @@
     color: var(--vchasno-ui-text-primary-color, #333);
 }
 
+.vchasno-ui-title.--pretty {
+    text-wrap: pretty;
+}
+
 .vchasno-ui-title.--ellipsis {
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/index.d.ts

@@ -115,6 +115,7 @@ declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttribu
 interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5;
     className?: string;
+    pretty?: boolean;
 }
 declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
 

package/dist/index.js

@@ -278,7 +278,7 @@ var LabelText = function (_a) {
         React$1.createElement("sup", null, "*")));
 };
 
-var css_248z$i = ".vchasno-ui-input {\n    display: inline-flex;\n    max-width: 100%;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n    flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n    position: relative;\n    display: flex;\n    min-height: 50px;\n    box-sizing: border-box;\n    align-items: center;\n    padding-right: 33px;\n    padding-left: 16px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    outline: solid 3px transparent;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n    max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n    display: flex;\n    flex-grow: 0;\n    flex-shrink: 0;\n    align-items: center;\n    font-size: var(--vchasno-ui-input-font-size, 14px);\n    line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    display: block;\n    width: 18px;\n    height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n    background-color: var(--vchasno-ui-input-bg-color-disabled);\n    color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n    cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-color-error);\n    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
+var css_248z$i = ".vchasno-ui-input {\n    display: inline-flex;\n    max-width: 100%;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n    flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n    position: relative;\n    display: flex;\n    min-height: 50px;\n    box-sizing: border-box;\n    align-items: center;\n    padding-right: 33px;\n    padding-left: 16px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    outline: solid 3px transparent;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n    max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n    display: flex;\n    flex-grow: 0;\n    flex-shrink: 0;\n    align-items: center;\n    margin-right: 5px;\n    font-size: var(--vchasno-ui-input-font-size, 14px);\n    line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    display: block;\n    width: 18px;\n    height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n    background-color: var(--vchasno-ui-input-bg-color-disabled);\n    color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n    cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-color-error);\n    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
 styleInject(css_248z$i);
 
 var Input = function (_a) {
@@ -290,7 +290,7 @@ var Input = function (_a) {
             '--error': error,
         }, className) }, labelProps),
         React$1.createElement("span", { className: "vchasno-ui-input__wrapper" },
-            React$1.createElement("span", { className: "vchasno-ui-input__wrapper__start-element" }, startElement),
+            startElement && (React$1.createElement("span", { className: "vchasno-ui-input__wrapper__start-element" }, startElement)),
             children,
             React$1.createElement(LabelText, null, label),
             React$1.createElement("span", { className: "vchasno-ui-input__feedback" }, loading && React$1.createElement(Spinner, { height: "100%" })),
@@ -443,12 +443,12 @@ Text.displayName = 'Text';
 var css_248z$d = ".--text-start {\n  text-align: start;\n}\n\n.--text-center {\n  text-align: center;\n}\n\n.--text-end {\n  text-align: end;\n}\n\n.--text-justify {\n  text-align: justify;\n}\n";
 styleInject(css_248z$d);
 
-var css_248z$c = ".vchasno-ui-title {\n    color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-title.--ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\nh1.vchasno-ui-title,\n.vchasno-ui-title h1 {\n    font-size: 32px;\n    font-weight: 500;\n    line-height: 1.35;\n}\n\nh2.vchasno-ui-title,\n.vchasno-ui-title h2 {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 1.35;\n}\n\nh3.vchasno-ui-title,\n.vchasno-ui-title h3 {\n    font-size: 24px;\n    font-weight: 500;\n    line-height: 1.35;\n}\n\nh4.vchasno-ui-title,\n.vchasno-ui-title h4 {\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.4;\n}\n\nh5.vchasno-ui-title,\n.vchasno-ui-title h5 {\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.5;\n}\n";
+var css_248z$c = ".vchasno-ui-title {\n    color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-title.--pretty {\n    text-wrap: pretty;\n}\n\n.vchasno-ui-title.--ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\nh1.vchasno-ui-title,\n.vchasno-ui-title h1 {\n    font-size: 32px;\n    font-weight: 500;\n    line-height: 1.35;\n}\n\nh2.vchasno-ui-title,\n.vchasno-ui-title h2 {\n    font-size: 30px;\n    font-weight: 500;\n    line-height: 1.35;\n}\n\nh3.vchasno-ui-title,\n.vchasno-ui-title h3 {\n    font-size: 24px;\n    font-weight: 500;\n    line-height: 1.35;\n}\n\nh4.vchasno-ui-title,\n.vchasno-ui-title h4 {\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 1.4;\n}\n\nh5.vchasno-ui-title,\n.vchasno-ui-title h5 {\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 1.5;\n}\n";
 styleInject(css_248z$c);
 
 var Title = React$1.forwardRef(function (_a, ref) {
-    var _b = _a.level, level = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.ellipsis, ellipsis = _c === void 0 ? false : _c, textAlign = _a.textAlign, rest = __rest(_a, ["level", "className", "ellipsis", "textAlign"]);
-    var classes = cn('vchasno-ui-title', className, { '--ellipsis': ellipsis }, textAlign && "--text-".concat(textAlign));
+    var _b = _a.level, level = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.ellipsis, ellipsis = _c === void 0 ? false : _c, textAlign = _a.textAlign, _d = _a.pretty, pretty = _d === void 0 ? true : _d, rest = __rest(_a, ["level", "className", "ellipsis", "textAlign", "pretty"]);
+    var classes = cn('vchasno-ui-title', className, { '--ellipsis': ellipsis, '--pretty': pretty }, textAlign && "--text-".concat(textAlign));
     switch (level) {
         case 2:
             return React$1.createElement("h2", __assign({}, rest, { ref: ref, className: classes }));