@vchasno/ui-kit 0.3.10 → 0.3.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/Datepicker/index.cjs.js +11147 -11135
- package/dist/Datepicker/index.cjs.js.map +1 -1
- package/dist/Datepicker/index.d.ts +9 -5
- package/dist/Datepicker/index.js +11163 -11151
- package/dist/Datepicker/index.js.map +1 -1
- package/dist/Datepicker/types/components/Datepicker/DatePicker.d.ts +8 -4
- package/dist/Menu/types/components/Datepicker/DatePicker.d.ts +8 -4
- package/dist/ProjectsPopover/types/components/Datepicker/DatePicker.d.ts +8 -4
- package/dist/Select/index.cjs.js +1 -1
- package/dist/Select/index.js +1 -1
- package/dist/Select/types/components/Datepicker/DatePicker.d.ts +8 -4
- package/dist/SelectCreatable/index.cjs.js +1 -1
- package/dist/SelectCreatable/index.js +1 -1
- package/dist/SelectCreatable/types/components/Datepicker/DatePicker.d.ts +8 -4
- package/dist/Snackbar/index.cjs.js +2 -2
- package/dist/Snackbar/index.js +2 -2
- package/dist/Snackbar/types/components/Datepicker/DatePicker.d.ts +8 -4
- package/dist/css/_theme.css +19 -5
- package/dist/index.js +2 -2
- package/dist/types/components/Datepicker/DatePicker.d.ts +8 -4
- package/package.json +3 -3
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ReactDatePickerProps } from 'react-datepicker';
|
|
2
|
+
import type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';
|
|
3
3
|
import { MaskedInputProps } from 'react-text-mask';
|
|
4
4
|
import type { ErrorFeedback, LoadingFeedback, WithHint } from '../types';
|
|
5
5
|
import './DatePicker.global.css';
|
|
6
|
-
export
|
|
6
|
+
export type DatePickerProps = {
|
|
7
7
|
label?: string;
|
|
8
8
|
className?: string;
|
|
9
9
|
showMask?: boolean;
|
|
10
10
|
mask?: MaskedInputProps['mask'];
|
|
11
11
|
onChange: ReactDatePickerProps['onChange'];
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
isClearable: ReactDatePickerProps['isClearable'];
|
|
13
|
+
dateFormat?: ReactDatePickerProps['dateFormat'];
|
|
14
|
+
} & ReactDatePickerProps & Partial<LoadingFeedback & WithHint & ErrorFeedback>;
|
|
15
|
+
/**
|
|
16
|
+
* @see <https://reactdatepicker.com/>
|
|
17
|
+
*/
|
|
14
18
|
declare const DatePicker: React.FC<DatePickerProps>;
|
|
15
19
|
export default DatePicker;
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ReactDatePickerProps } from 'react-datepicker';
|
|
2
|
+
import type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';
|
|
3
3
|
import { MaskedInputProps } from 'react-text-mask';
|
|
4
4
|
import type { ErrorFeedback, LoadingFeedback, WithHint } from '../types';
|
|
5
5
|
import './DatePicker.global.css';
|
|
6
|
-
export
|
|
6
|
+
export type DatePickerProps = {
|
|
7
7
|
label?: string;
|
|
8
8
|
className?: string;
|
|
9
9
|
showMask?: boolean;
|
|
10
10
|
mask?: MaskedInputProps['mask'];
|
|
11
11
|
onChange: ReactDatePickerProps['onChange'];
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
isClearable: ReactDatePickerProps['isClearable'];
|
|
13
|
+
dateFormat?: ReactDatePickerProps['dateFormat'];
|
|
14
|
+
} & ReactDatePickerProps & Partial<LoadingFeedback & WithHint & ErrorFeedback>;
|
|
15
|
+
/**
|
|
16
|
+
* @see <https://reactdatepicker.com/>
|
|
17
|
+
*/
|
|
14
18
|
declare const DatePicker: React.FC<DatePickerProps>;
|
|
15
19
|
export default DatePicker;
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ReactDatePickerProps } from 'react-datepicker';
|
|
2
|
+
import type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';
|
|
3
3
|
import { MaskedInputProps } from 'react-text-mask';
|
|
4
4
|
import type { ErrorFeedback, LoadingFeedback, WithHint } from '../types';
|
|
5
5
|
import './DatePicker.global.css';
|
|
6
|
-
export
|
|
6
|
+
export type DatePickerProps = {
|
|
7
7
|
label?: string;
|
|
8
8
|
className?: string;
|
|
9
9
|
showMask?: boolean;
|
|
10
10
|
mask?: MaskedInputProps['mask'];
|
|
11
11
|
onChange: ReactDatePickerProps['onChange'];
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
isClearable: ReactDatePickerProps['isClearable'];
|
|
13
|
+
dateFormat?: ReactDatePickerProps['dateFormat'];
|
|
14
|
+
} & ReactDatePickerProps & Partial<LoadingFeedback & WithHint & ErrorFeedback>;
|
|
15
|
+
/**
|
|
16
|
+
* @see <https://reactdatepicker.com/>
|
|
17
|
+
*/
|
|
14
18
|
declare const DatePicker: React.FC<DatePickerProps>;
|
|
15
19
|
export default DatePicker;
|
package/dist/Select/index.cjs.js
CHANGED
|
@@ -7841,7 +7841,7 @@ var noOptionsMessageDefault = function () { return React.createElement("span", n
|
|
|
7841
7841
|
var loadingMessageDefault = function () { return React.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
|
|
7842
7842
|
var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
|
|
7843
7843
|
|
|
7844
|
-
var css_248z = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 50px;\n border-color: var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n z-index: 100;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n margin-top: 4px;\n margin-bottom:
|
|
7844
|
+
var css_248z = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 50px;\n border-color: var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n z-index: 100;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n margin-top: 4px;\n margin-bottom: 6px;\n box-shadow: none;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n border: 1px solid #ff5937;\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n border-color: #ff5937;\n}\n\n.vchasno-ui-select\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n .vchasno-ui-select__control:hover\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n border-color: var(--vchasno-ui-input-border-color-focused);\n box-shadow: none;\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n padding: 3px;\n border-radius: 3px;\n color: var(--vchasno-ui-input-font-color);\n outline: 3px solid transparent;\n transition:\n outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n padding-right: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__value-container {\n padding: 10px 14px;\n}\n";
|
|
7845
7845
|
styleInject(css_248z);
|
|
7846
7846
|
|
|
7847
7847
|
var Select = function (_a) {
|
package/dist/Select/index.js
CHANGED
|
@@ -7819,7 +7819,7 @@ var noOptionsMessageDefault = function () { return React__default.createElement(
|
|
|
7819
7819
|
var loadingMessageDefault = function () { return React__default.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
|
|
7820
7820
|
var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
|
|
7821
7821
|
|
|
7822
|
-
var css_248z = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 50px;\n border-color: var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n z-index: 100;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n margin-top: 4px;\n margin-bottom:
|
|
7822
|
+
var css_248z = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 50px;\n border-color: var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n z-index: 100;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n margin-top: 4px;\n margin-bottom: 6px;\n box-shadow: none;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n border: 1px solid #ff5937;\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n border-color: #ff5937;\n}\n\n.vchasno-ui-select\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n .vchasno-ui-select__control:hover\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n border-color: var(--vchasno-ui-input-border-color-focused);\n box-shadow: none;\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n padding: 3px;\n border-radius: 3px;\n color: var(--vchasno-ui-input-font-color);\n outline: 3px solid transparent;\n transition:\n outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n padding-right: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__value-container {\n padding: 10px 14px;\n}\n";
|
|
7823
7823
|
styleInject(css_248z);
|
|
7824
7824
|
|
|
7825
7825
|
var Select = function (_a) {
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ReactDatePickerProps } from 'react-datepicker';
|
|
2
|
+
import type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';
|
|
3
3
|
import { MaskedInputProps } from 'react-text-mask';
|
|
4
4
|
import type { ErrorFeedback, LoadingFeedback, WithHint } from '../types';
|
|
5
5
|
import './DatePicker.global.css';
|
|
6
|
-
export
|
|
6
|
+
export type DatePickerProps = {
|
|
7
7
|
label?: string;
|
|
8
8
|
className?: string;
|
|
9
9
|
showMask?: boolean;
|
|
10
10
|
mask?: MaskedInputProps['mask'];
|
|
11
11
|
onChange: ReactDatePickerProps['onChange'];
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
isClearable: ReactDatePickerProps['isClearable'];
|
|
13
|
+
dateFormat?: ReactDatePickerProps['dateFormat'];
|
|
14
|
+
} & ReactDatePickerProps & Partial<LoadingFeedback & WithHint & ErrorFeedback>;
|
|
15
|
+
/**
|
|
16
|
+
* @see <https://reactdatepicker.com/>
|
|
17
|
+
*/
|
|
14
18
|
declare const DatePicker: React.FC<DatePickerProps>;
|
|
15
19
|
export default DatePicker;
|
|
@@ -7928,7 +7928,7 @@ var noOptionsMessageDefault = function () { return React.createElement("span", n
|
|
|
7928
7928
|
var loadingMessageDefault = function () { return React.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
|
|
7929
7929
|
var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
|
|
7930
7930
|
|
|
7931
|
-
var css_248z = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 50px;\n border-color: var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n z-index: 100;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n margin-top: 4px;\n margin-bottom:
|
|
7931
|
+
var css_248z = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 50px;\n border-color: var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n z-index: 100;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n margin-top: 4px;\n margin-bottom: 6px;\n box-shadow: none;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n border: 1px solid #ff5937;\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n border-color: #ff5937;\n}\n\n.vchasno-ui-select\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n .vchasno-ui-select__control:hover\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n border-color: var(--vchasno-ui-input-border-color-focused);\n box-shadow: none;\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n padding: 3px;\n border-radius: 3px;\n color: var(--vchasno-ui-input-font-color);\n outline: 3px solid transparent;\n transition:\n outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n padding-right: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__value-container {\n padding: 10px 14px;\n}\n";
|
|
7932
7932
|
styleInject(css_248z);
|
|
7933
7933
|
|
|
7934
7934
|
var SelectCreatable = function (_a) {
|
|
@@ -7908,7 +7908,7 @@ var noOptionsMessageDefault = function () { return React__default.createElement(
|
|
|
7908
7908
|
var loadingMessageDefault = function () { return React__default.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
|
|
7909
7909
|
var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
|
|
7910
7910
|
|
|
7911
|
-
var css_248z = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 50px;\n border-color: var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n z-index: 100;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n margin-top: 4px;\n margin-bottom:
|
|
7911
|
+
var css_248z = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 50px;\n border-color: var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n z-index: 100;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n margin-top: 4px;\n margin-bottom: 6px;\n box-shadow: none;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n border: 1px solid #ff5937;\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n border-color: #ff5937;\n}\n\n.vchasno-ui-select\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n .vchasno-ui-select__control:hover\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n border-color: var(--vchasno-ui-input-border-color-focused);\n box-shadow: none;\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n padding: 3px;\n border-radius: 3px;\n color: var(--vchasno-ui-input-font-color);\n outline: 3px solid transparent;\n transition:\n outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n padding-right: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__value-container {\n padding: 10px 14px;\n}\n";
|
|
7912
7912
|
styleInject(css_248z);
|
|
7913
7913
|
|
|
7914
7914
|
var SelectCreatable = function (_a) {
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ReactDatePickerProps } from 'react-datepicker';
|
|
2
|
+
import type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';
|
|
3
3
|
import { MaskedInputProps } from 'react-text-mask';
|
|
4
4
|
import type { ErrorFeedback, LoadingFeedback, WithHint } from '../types';
|
|
5
5
|
import './DatePicker.global.css';
|
|
6
|
-
export
|
|
6
|
+
export type DatePickerProps = {
|
|
7
7
|
label?: string;
|
|
8
8
|
className?: string;
|
|
9
9
|
showMask?: boolean;
|
|
10
10
|
mask?: MaskedInputProps['mask'];
|
|
11
11
|
onChange: ReactDatePickerProps['onChange'];
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
isClearable: ReactDatePickerProps['isClearable'];
|
|
13
|
+
dateFormat?: ReactDatePickerProps['dateFormat'];
|
|
14
|
+
} & ReactDatePickerProps & Partial<LoadingFeedback & WithHint & ErrorFeedback>;
|
|
15
|
+
/**
|
|
16
|
+
* @see <https://reactdatepicker.com/>
|
|
17
|
+
*/
|
|
14
18
|
declare const DatePicker: React.FC<DatePickerProps>;
|
|
15
19
|
export default DatePicker;
|
|
@@ -309,7 +309,7 @@ var reactTextMask = {exports: {}};
|
|
|
309
309
|
var css_248z$j = ".vchasno-ui-mask-input {\n position: relative;\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-mask-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-mask-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
310
310
|
styleInject(css_248z$j);
|
|
311
311
|
|
|
312
|
-
var css_248z$i = ".vchasno-ui-pagination {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n display: flex;\n min-width: var(--vchasno-ui-pagination-size);\n height: var(--vchasno-ui-pagination-size);\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n outline: 0;\n text-align: center;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-pagination__item-hidden {\n display: none;\n}\n";
|
|
312
|
+
var css_248z$i = ".vchasno-ui-pagination {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n display: flex;\n min-width: var(--vchasno-ui-pagination-size);\n height: var(--vchasno-ui-pagination-size);\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n outline: 0;\n text-align: center;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n background-color: var(--vchasno-ui-pagination-hover-bg-color, rgb(0 0 0 / 10%));\n}\n\n.vchasno-ui-pagination__item-active {\n border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-pagination__item-hidden {\n display: none;\n}\n";
|
|
313
313
|
styleInject(css_248z$i);
|
|
314
314
|
|
|
315
315
|
var css_248z$h = ".vchasno-ui-text-input {\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-text-input::-webkit-outer-spin-button,\n.vchasno-ui-text-input::-webkit-inner-spin-button {\n margin: 0;\n appearance: none;\n}\n\n/* Firefox */\n.vchasno-ui-text-input[type='number'] {\n appearance: textfield;\n}\n\n.vchasno-ui-text-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n";
|
|
@@ -509,7 +509,7 @@ Switch.displayName = 'Switch';
|
|
|
509
509
|
var css_248z$9 = ".vchasno-ui-tabs-wrapper {\n position: relative;\n width: 100%;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.vchasno-ui-tabs-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n.--h-scroll {\n overflow: auto;\n}\n\n.vchasno-ui-tabs-wrapper-root {\n position: relative;\n}\n\n.vchasno-ui-tabs-wrapper-root::after,\n.vchasno-ui-tabs-wrapper-root::before {\n position: absolute;\n top: 0;\n bottom: 0;\n display: block;\n width: 30px;\n content: '';\n pointer-events: none;\n}\n\n.--ping-right::after {\n right: 0;\n box-shadow: inset -12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.--ping-left::before {\n left: 0;\n box-shadow: inset 12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.vchasno-ui-tabs {\n --active-color: var(--vchasno-ui-tabs-active-color, #087dc1);\n\n position: relative;\n display: flex;\n font-size: 16px;\n font-weight: 500;\n}\n\n.vchasno-ui-tabs__indicator {\n position: absolute;\n z-index: 1;\n bottom: -1px;\n left: 0;\n display: block;\n width: 10px;\n height: 3px;\n border-radius: 3px;\n background-color: var(--active-color);\n transition:\n width var(--vchasno-ui-transition-duration-sec, 0.3s),\n left var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.--h-scroll .vchasno-ui-tabs__indicator {\n display: none;\n}\n\n.vchasno-ui-tabs-wrapper-root.--skip-animation .vchasno-ui-tabs__indicator {\n transition: none;\n}\n\n.vchasno-ui-tabs__label-item {\n position: relative;\n display: inline-flex;\n height: 50px;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n padding: 0 15px;\n color: #333;\n cursor: pointer;\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n background-color var(--vchasno-ui-transition-duration-sec);\n user-select: none;\n}\n\n.vchasno-ui-tabs__label-item::after {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n height: 0;\n border-radius: 3px;\n background-color: var(--active-color);\n content: '';\n transition: height var(--vchasno-ui-transition-duration-sec);\n}\n\n.--h-scroll .vchasno-ui-tabs__label-item.--active::after {\n height: 3px;\n}\n\n.vchasno-ui-tabs-wrapper:not(.--h-scroll) .vchasno-ui-tabs {\n border-bottom: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-tabs__label-item.--active {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item:not(.--disabled):hover {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item.--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n";
|
|
510
510
|
styleInject(css_248z$9);
|
|
511
511
|
|
|
512
|
-
var css_248z$8 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n outline: 1.5px solid #ab9eff;\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
|
|
512
|
+
var css_248z$8 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n outline: 1.5px solid var(--vchasno-ui-checkbox-outline-color, #ab9eff);\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
|
|
513
513
|
styleInject(css_248z$8);
|
|
514
514
|
|
|
515
515
|
var Checkbox = React$1.forwardRef(function (_a, ref) {
|
package/dist/Snackbar/index.js
CHANGED
|
@@ -287,7 +287,7 @@ var reactTextMask = {exports: {}};
|
|
|
287
287
|
var css_248z$j = ".vchasno-ui-mask-input {\n position: relative;\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-mask-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-mask-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
288
288
|
styleInject(css_248z$j);
|
|
289
289
|
|
|
290
|
-
var css_248z$i = ".vchasno-ui-pagination {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n display: flex;\n min-width: var(--vchasno-ui-pagination-size);\n height: var(--vchasno-ui-pagination-size);\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n outline: 0;\n text-align: center;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-pagination__item-hidden {\n display: none;\n}\n";
|
|
290
|
+
var css_248z$i = ".vchasno-ui-pagination {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n display: flex;\n min-width: var(--vchasno-ui-pagination-size);\n height: var(--vchasno-ui-pagination-size);\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n outline: 0;\n text-align: center;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n background-color: var(--vchasno-ui-pagination-hover-bg-color, rgb(0 0 0 / 10%));\n}\n\n.vchasno-ui-pagination__item-active {\n border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-pagination__item-hidden {\n display: none;\n}\n";
|
|
291
291
|
styleInject(css_248z$i);
|
|
292
292
|
|
|
293
293
|
var css_248z$h = ".vchasno-ui-text-input {\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-text-input::-webkit-outer-spin-button,\n.vchasno-ui-text-input::-webkit-inner-spin-button {\n margin: 0;\n appearance: none;\n}\n\n/* Firefox */\n.vchasno-ui-text-input[type='number'] {\n appearance: textfield;\n}\n\n.vchasno-ui-text-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n";
|
|
@@ -487,7 +487,7 @@ Switch.displayName = 'Switch';
|
|
|
487
487
|
var css_248z$9 = ".vchasno-ui-tabs-wrapper {\n position: relative;\n width: 100%;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.vchasno-ui-tabs-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n.--h-scroll {\n overflow: auto;\n}\n\n.vchasno-ui-tabs-wrapper-root {\n position: relative;\n}\n\n.vchasno-ui-tabs-wrapper-root::after,\n.vchasno-ui-tabs-wrapper-root::before {\n position: absolute;\n top: 0;\n bottom: 0;\n display: block;\n width: 30px;\n content: '';\n pointer-events: none;\n}\n\n.--ping-right::after {\n right: 0;\n box-shadow: inset -12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.--ping-left::before {\n left: 0;\n box-shadow: inset 12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.vchasno-ui-tabs {\n --active-color: var(--vchasno-ui-tabs-active-color, #087dc1);\n\n position: relative;\n display: flex;\n font-size: 16px;\n font-weight: 500;\n}\n\n.vchasno-ui-tabs__indicator {\n position: absolute;\n z-index: 1;\n bottom: -1px;\n left: 0;\n display: block;\n width: 10px;\n height: 3px;\n border-radius: 3px;\n background-color: var(--active-color);\n transition:\n width var(--vchasno-ui-transition-duration-sec, 0.3s),\n left var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.--h-scroll .vchasno-ui-tabs__indicator {\n display: none;\n}\n\n.vchasno-ui-tabs-wrapper-root.--skip-animation .vchasno-ui-tabs__indicator {\n transition: none;\n}\n\n.vchasno-ui-tabs__label-item {\n position: relative;\n display: inline-flex;\n height: 50px;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n padding: 0 15px;\n color: #333;\n cursor: pointer;\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n background-color var(--vchasno-ui-transition-duration-sec);\n user-select: none;\n}\n\n.vchasno-ui-tabs__label-item::after {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n height: 0;\n border-radius: 3px;\n background-color: var(--active-color);\n content: '';\n transition: height var(--vchasno-ui-transition-duration-sec);\n}\n\n.--h-scroll .vchasno-ui-tabs__label-item.--active::after {\n height: 3px;\n}\n\n.vchasno-ui-tabs-wrapper:not(.--h-scroll) .vchasno-ui-tabs {\n border-bottom: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-tabs__label-item.--active {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item:not(.--disabled):hover {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item.--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n";
|
|
488
488
|
styleInject(css_248z$9);
|
|
489
489
|
|
|
490
|
-
var css_248z$8 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n outline: 1.5px solid #ab9eff;\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
|
|
490
|
+
var css_248z$8 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n outline: 1.5px solid var(--vchasno-ui-checkbox-outline-color, #ab9eff);\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
|
|
491
491
|
styleInject(css_248z$8);
|
|
492
492
|
|
|
493
493
|
var Checkbox = React__default.forwardRef(function (_a, ref) {
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ReactDatePickerProps } from 'react-datepicker';
|
|
2
|
+
import type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';
|
|
3
3
|
import { MaskedInputProps } from 'react-text-mask';
|
|
4
4
|
import type { ErrorFeedback, LoadingFeedback, WithHint } from '../types';
|
|
5
5
|
import './DatePicker.global.css';
|
|
6
|
-
export
|
|
6
|
+
export type DatePickerProps = {
|
|
7
7
|
label?: string;
|
|
8
8
|
className?: string;
|
|
9
9
|
showMask?: boolean;
|
|
10
10
|
mask?: MaskedInputProps['mask'];
|
|
11
11
|
onChange: ReactDatePickerProps['onChange'];
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
isClearable: ReactDatePickerProps['isClearable'];
|
|
13
|
+
dateFormat?: ReactDatePickerProps['dateFormat'];
|
|
14
|
+
} & ReactDatePickerProps & Partial<LoadingFeedback & WithHint & ErrorFeedback>;
|
|
15
|
+
/**
|
|
16
|
+
* @see <https://reactdatepicker.com/>
|
|
17
|
+
*/
|
|
14
18
|
declare const DatePicker: React.FC<DatePickerProps>;
|
|
15
19
|
export default DatePicker;
|
package/dist/css/_theme.css
CHANGED
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
--vchasno-ui-label-color-default: #6b8091;
|
|
33
33
|
--vchasno-ui-label-color-focused: #6b5fff;
|
|
34
34
|
--vchasno-ui-checkbox-bg-color: #604adf;
|
|
35
|
+
--vchasno-ui-checkbox-outline-color: #ab9eff;
|
|
35
36
|
--vchasno-ui-checkbox-disabled-bg: #b6cadb;
|
|
36
37
|
--vchasno-ui-checkbox-border-color: #b6cadb;
|
|
37
38
|
--vchasno-ui-checkbox-icon-color: #fff;
|
|
@@ -56,6 +57,7 @@
|
|
|
56
57
|
--vchasno-ui-alert-success-bg: rgb(28 184 0 / 10%);
|
|
57
58
|
--vchasno-ui-tabs-active-color: #087dc1;
|
|
58
59
|
--vchasno-ui-pagination-border-color: #6b5fff;
|
|
60
|
+
--vchasno-ui-pagination-hover-bg-color: rgb(0 0 0 / 10%);
|
|
59
61
|
--vchasno-ui-pagination-size: 32px;
|
|
60
62
|
--vchasno-ui-switch-color-bg: #b6cadb;
|
|
61
63
|
--vchasno-ui-switch-spinner-color: #b6cadb;
|
|
@@ -82,10 +84,22 @@
|
|
|
82
84
|
--vchasno-ui-snackbar-toast-width: auto;
|
|
83
85
|
--vchasno-ui-snackbar-toast-max-width: 560px;
|
|
84
86
|
--vchasno-ui-snackbar-toast-offset: 16px;
|
|
85
|
-
--vchasno-ui-snackbar-toast-top: max(
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
87
|
+
--vchasno-ui-snackbar-toast-top: max(
|
|
88
|
+
var(--vchasno-ui-snackbar-toast-offset),
|
|
89
|
+
env(safe-area-inset-top)
|
|
90
|
+
);
|
|
91
|
+
--vchasno-ui-snackbar-toast-right: max(
|
|
92
|
+
var(--vchasno-ui-snackbar-toast-offset),
|
|
93
|
+
env(safe-area-inset-right)
|
|
94
|
+
);
|
|
95
|
+
--vchasno-ui-snackbar-toast-left: max(
|
|
96
|
+
var(--vchasno-ui-snackbar-toast-offset),
|
|
97
|
+
env(safe-area-inset-left)
|
|
98
|
+
);
|
|
99
|
+
--vchasno-ui-snackbar-toast-bottom: max(
|
|
100
|
+
var(--vchasno-ui-snackbar-toast-offset),
|
|
101
|
+
env(safe-area-inset-bottom)
|
|
102
|
+
);
|
|
89
103
|
--vchasno-ui-snackbar-toast-background: #333;
|
|
90
104
|
--vchasno-ui-snackbar-toast-min-height: 64px;
|
|
91
105
|
--vchasno-ui-snackbar-toast-max-height: 800px;
|
|
@@ -115,5 +129,5 @@
|
|
|
115
129
|
--vchasno-ui-snackbar-color-progress-warning: var(--vchasno-ui-snackbar-color-warning);
|
|
116
130
|
--vchasno-ui-snackbar-color-progress-error: var(--vchasno-ui-snackbar-color-error);
|
|
117
131
|
--vchasno-ui-snackbar-color-progress-bgo: 0.2;
|
|
118
|
-
--vchasno-ui-snackbar-action-button-color: #
|
|
132
|
+
--vchasno-ui-snackbar-action-button-color: #0094ff;
|
|
119
133
|
}
|
package/dist/index.js
CHANGED
|
@@ -329,7 +329,7 @@ var composePaginationSteps = function (total, current) {
|
|
|
329
329
|
return display;
|
|
330
330
|
};
|
|
331
331
|
|
|
332
|
-
var css_248z$g = ".vchasno-ui-pagination {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n display: flex;\n min-width: var(--vchasno-ui-pagination-size);\n height: var(--vchasno-ui-pagination-size);\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n outline: 0;\n text-align: center;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-pagination__item-hidden {\n display: none;\n}\n";
|
|
332
|
+
var css_248z$g = ".vchasno-ui-pagination {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n display: flex;\n min-width: var(--vchasno-ui-pagination-size);\n height: var(--vchasno-ui-pagination-size);\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n outline: 0;\n text-align: center;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n background-color: var(--vchasno-ui-pagination-hover-bg-color, rgb(0 0 0 / 10%));\n}\n\n.vchasno-ui-pagination__item-active {\n border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-pagination__item-hidden {\n display: none;\n}\n";
|
|
333
333
|
styleInject(css_248z$g);
|
|
334
334
|
|
|
335
335
|
var Pagination = function (_a) {
|
|
@@ -690,7 +690,7 @@ var Tabs = function (_a) {
|
|
|
690
690
|
React$1.createElement(Spinner, { color: "var(--vchasno-ui-tabs-active-color, #087dc1)" })))));
|
|
691
691
|
};
|
|
692
692
|
|
|
693
|
-
var css_248z$6 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n outline: 1.5px solid #ab9eff;\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
|
|
693
|
+
var css_248z$6 = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n outline: 1.5px solid var(--vchasno-ui-checkbox-outline-color, #ab9eff);\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
|
|
694
694
|
styleInject(css_248z$6);
|
|
695
695
|
|
|
696
696
|
var Checkbox = React$1.forwardRef(function (_a, ref) {
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ReactDatePickerProps } from 'react-datepicker';
|
|
2
|
+
import type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';
|
|
3
3
|
import { MaskedInputProps } from 'react-text-mask';
|
|
4
4
|
import type { ErrorFeedback, LoadingFeedback, WithHint } from '../types';
|
|
5
5
|
import './DatePicker.global.css';
|
|
6
|
-
export
|
|
6
|
+
export type DatePickerProps = {
|
|
7
7
|
label?: string;
|
|
8
8
|
className?: string;
|
|
9
9
|
showMask?: boolean;
|
|
10
10
|
mask?: MaskedInputProps['mask'];
|
|
11
11
|
onChange: ReactDatePickerProps['onChange'];
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
isClearable: ReactDatePickerProps['isClearable'];
|
|
13
|
+
dateFormat?: ReactDatePickerProps['dateFormat'];
|
|
14
|
+
} & ReactDatePickerProps & Partial<LoadingFeedback & WithHint & ErrorFeedback>;
|
|
15
|
+
/**
|
|
16
|
+
* @see <https://reactdatepicker.com/>
|
|
17
|
+
*/
|
|
14
18
|
declare const DatePicker: React.FC<DatePickerProps>;
|
|
15
19
|
export default DatePicker;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vchasno/ui-kit",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.12",
|
|
4
4
|
"description": "React UI components for Vchasno applications",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -145,10 +145,10 @@
|
|
|
145
145
|
"@emotion/styled": "11.11.5",
|
|
146
146
|
"@mui/material": "5.15.16",
|
|
147
147
|
"@szhsin/react-menu": "^4.1.0",
|
|
148
|
-
"@types/react-datepicker": "
|
|
148
|
+
"@types/react-datepicker": "7.0.0",
|
|
149
149
|
"@types/react-text-mask": "5.4.11",
|
|
150
150
|
"classnames": "2.5.1",
|
|
151
|
-
"react-datepicker": "
|
|
151
|
+
"react-datepicker": "7.3.0",
|
|
152
152
|
"react-select": "5.8.0",
|
|
153
153
|
"react-text-mask": "5.5.0",
|
|
154
154
|
"react-textarea-autosize": "8.5.3",
|