@vchasno/ui-kit 0.2.5 → 0.2.7
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 +13 -1
- package/dist/Datepicker/types/components/PulseDot/PulseDot.d.ts +22 -0
- package/dist/Datepicker/types/components/PulseDot/index.d.ts +2 -0
- package/dist/Datepicker/types/components/Switch/Switch.d.ts +14 -0
- package/dist/Datepicker/types/components/Switch/index.d.ts +2 -0
- package/dist/Datepicker/types/components/index.d.ts +4 -2
- package/dist/Select/types/components/PulseDot/PulseDot.d.ts +22 -0
- package/dist/Select/types/components/PulseDot/index.d.ts +2 -0
- package/dist/Select/types/components/Switch/Switch.d.ts +14 -0
- package/dist/Select/types/components/Switch/index.d.ts +2 -0
- package/dist/Select/types/components/index.d.ts +4 -2
- package/dist/SelectCreatable/types/components/PulseDot/PulseDot.d.ts +22 -0
- package/dist/SelectCreatable/types/components/PulseDot/index.d.ts +2 -0
- package/dist/SelectCreatable/types/components/Switch/Switch.d.ts +14 -0
- package/dist/SelectCreatable/types/components/Switch/index.d.ts +2 -0
- package/dist/SelectCreatable/types/components/index.d.ts +4 -2
- package/dist/css/_theme.css +6 -0
- package/dist/index.d.ts +27 -8
- package/dist/index.js +61 -54
- package/dist/index.js.map +1 -1
- package/dist/types/components/PulseDot/PulseDot.d.ts +22 -0
- package/dist/types/components/PulseDot/index.d.ts +2 -0
- package/dist/types/components/Switch/Switch.d.ts +14 -0
- package/dist/types/components/Switch/index.d.ts +2 -0
- package/dist/types/components/index.d.ts +4 -2
- package/package.json +1 -1
- package/dist/Datepicker/types/components/Switcher/Switcher.d.ts +0 -14
- package/dist/Datepicker/types/components/Switcher/index.d.ts +0 -2
- package/dist/Select/types/components/Switcher/Switcher.d.ts +0 -14
- package/dist/Select/types/components/Switcher/index.d.ts +0 -2
- package/dist/SelectCreatable/types/components/Switcher/Switcher.d.ts +0 -14
- package/dist/SelectCreatable/types/components/Switcher/index.d.ts +0 -2
- package/dist/types/components/Switcher/Switcher.d.ts +0 -14
- package/dist/types/components/Switcher/index.d.ts +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.2.7] - 2024-02-14
|
|
11
|
+
|
|
12
|
+
## Added
|
|
13
|
+
|
|
14
|
+
- PulseDot component for smooth user onboardings and call-to-actions
|
|
15
|
+
|
|
16
|
+
## [0.2.6] - 2024-02-14
|
|
17
|
+
|
|
18
|
+
## Fixed
|
|
19
|
+
|
|
20
|
+
- Replace Switch (EDO style) component with Switcher (not in used yet)
|
|
21
|
+
|
|
10
22
|
## [0.2.5] - 2024-02-08
|
|
11
23
|
|
|
12
24
|
## Fixed
|
|
@@ -101,4 +113,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
101
113
|
|
|
102
114
|
### Added
|
|
103
115
|
|
|
104
|
-
- first release 0.1.0
|
|
116
|
+
- first release 0.1.0
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import './PulseDot.css';
|
|
3
|
+
export interface PulseDotProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* Color of the dot
|
|
6
|
+
*/
|
|
7
|
+
color?: string;
|
|
8
|
+
/**
|
|
9
|
+
* CSS width/height values like 10em | 10px | 50%
|
|
10
|
+
*/
|
|
11
|
+
size?: React.CSSProperties['width'];
|
|
12
|
+
/**
|
|
13
|
+
* CSS style object for overriding default styling
|
|
14
|
+
*/
|
|
15
|
+
style?: React.CSSProperties;
|
|
16
|
+
/**
|
|
17
|
+
* className for overriding default styling
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
declare const PulseDot: React.FC<PulseDotProps>;
|
|
22
|
+
export default PulseDot;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import './Switch.global.css';
|
|
3
|
+
import { LoadingFeedback } from '../types';
|
|
4
|
+
export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
|
|
5
|
+
className?: string;
|
|
6
|
+
label?: string;
|
|
7
|
+
value?: boolean;
|
|
8
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
9
|
+
onChecked?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
10
|
+
defaultChecked?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
14
|
+
export default Switch;
|
|
@@ -24,9 +24,11 @@ export { default as Alert } from './Alert';
|
|
|
24
24
|
export type { AlertProps } from './Alert';
|
|
25
25
|
export { default as Spinner } from './Spinner';
|
|
26
26
|
export type { SpinnerProps } from './Spinner';
|
|
27
|
-
export { default as
|
|
28
|
-
export type {
|
|
27
|
+
export { default as Switch } from './Switch';
|
|
28
|
+
export type { SwitchProps } from './Switch';
|
|
29
29
|
export { default as Tabs } from './Tabs';
|
|
30
30
|
export type { TabsProps } from './Tabs';
|
|
31
31
|
export { default as Checkbox } from './Checkbox';
|
|
32
32
|
export type { CheckboxProps } from './Checkbox';
|
|
33
|
+
export { default as PulseDot } from './PulseDot';
|
|
34
|
+
export type { PulseDotProps } from './PulseDot';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import './PulseDot.css';
|
|
3
|
+
export interface PulseDotProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* Color of the dot
|
|
6
|
+
*/
|
|
7
|
+
color?: string;
|
|
8
|
+
/**
|
|
9
|
+
* CSS width/height values like 10em | 10px | 50%
|
|
10
|
+
*/
|
|
11
|
+
size?: React.CSSProperties['width'];
|
|
12
|
+
/**
|
|
13
|
+
* CSS style object for overriding default styling
|
|
14
|
+
*/
|
|
15
|
+
style?: React.CSSProperties;
|
|
16
|
+
/**
|
|
17
|
+
* className for overriding default styling
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
declare const PulseDot: React.FC<PulseDotProps>;
|
|
22
|
+
export default PulseDot;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import './Switch.global.css';
|
|
3
|
+
import { LoadingFeedback } from '../types';
|
|
4
|
+
export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
|
|
5
|
+
className?: string;
|
|
6
|
+
label?: string;
|
|
7
|
+
value?: boolean;
|
|
8
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
9
|
+
onChecked?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
10
|
+
defaultChecked?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
14
|
+
export default Switch;
|
|
@@ -24,9 +24,11 @@ export { default as Alert } from './Alert';
|
|
|
24
24
|
export type { AlertProps } from './Alert';
|
|
25
25
|
export { default as Spinner } from './Spinner';
|
|
26
26
|
export type { SpinnerProps } from './Spinner';
|
|
27
|
-
export { default as
|
|
28
|
-
export type {
|
|
27
|
+
export { default as Switch } from './Switch';
|
|
28
|
+
export type { SwitchProps } from './Switch';
|
|
29
29
|
export { default as Tabs } from './Tabs';
|
|
30
30
|
export type { TabsProps } from './Tabs';
|
|
31
31
|
export { default as Checkbox } from './Checkbox';
|
|
32
32
|
export type { CheckboxProps } from './Checkbox';
|
|
33
|
+
export { default as PulseDot } from './PulseDot';
|
|
34
|
+
export type { PulseDotProps } from './PulseDot';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import './PulseDot.css';
|
|
3
|
+
export interface PulseDotProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* Color of the dot
|
|
6
|
+
*/
|
|
7
|
+
color?: string;
|
|
8
|
+
/**
|
|
9
|
+
* CSS width/height values like 10em | 10px | 50%
|
|
10
|
+
*/
|
|
11
|
+
size?: React.CSSProperties['width'];
|
|
12
|
+
/**
|
|
13
|
+
* CSS style object for overriding default styling
|
|
14
|
+
*/
|
|
15
|
+
style?: React.CSSProperties;
|
|
16
|
+
/**
|
|
17
|
+
* className for overriding default styling
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
declare const PulseDot: React.FC<PulseDotProps>;
|
|
22
|
+
export default PulseDot;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import './Switch.global.css';
|
|
3
|
+
import { LoadingFeedback } from '../types';
|
|
4
|
+
export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
|
|
5
|
+
className?: string;
|
|
6
|
+
label?: string;
|
|
7
|
+
value?: boolean;
|
|
8
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
9
|
+
onChecked?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
10
|
+
defaultChecked?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
14
|
+
export default Switch;
|
|
@@ -24,9 +24,11 @@ export { default as Alert } from './Alert';
|
|
|
24
24
|
export type { AlertProps } from './Alert';
|
|
25
25
|
export { default as Spinner } from './Spinner';
|
|
26
26
|
export type { SpinnerProps } from './Spinner';
|
|
27
|
-
export { default as
|
|
28
|
-
export type {
|
|
27
|
+
export { default as Switch } from './Switch';
|
|
28
|
+
export type { SwitchProps } from './Switch';
|
|
29
29
|
export { default as Tabs } from './Tabs';
|
|
30
30
|
export type { TabsProps } from './Tabs';
|
|
31
31
|
export { default as Checkbox } from './Checkbox';
|
|
32
32
|
export type { CheckboxProps } from './Checkbox';
|
|
33
|
+
export { default as PulseDot } from './PulseDot';
|
|
34
|
+
export type { PulseDotProps } from './PulseDot';
|
package/dist/css/_theme.css
CHANGED
|
@@ -55,4 +55,10 @@
|
|
|
55
55
|
--vchasno-ui-tabs-active-color: #087dc1;
|
|
56
56
|
--vchasno-ui-pagination-border-color: #6b5fff;
|
|
57
57
|
--vchasno-ui-pagination-size: 32px;
|
|
58
|
+
--vchasno-ui-switch-color-bg: #b6cadb;
|
|
59
|
+
--vchasno-ui-switch-spinner-color: #b6cadb;
|
|
60
|
+
--vchasno-ui-switch-circle-color: #fff;
|
|
61
|
+
--vchasno-ui-switch-active-color-bg: #00c5ff;
|
|
62
|
+
--vchasno-ui-pulse-dot-color: #604adf;
|
|
63
|
+
--vchasno-ui-pulse-dot-size: 35px;
|
|
58
64
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -148,17 +148,16 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
148
148
|
}
|
|
149
149
|
declare const Spinner: React.FC<SpinnerProps>;
|
|
150
150
|
|
|
151
|
-
interface
|
|
151
|
+
interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
|
|
152
152
|
className?: string;
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
153
|
+
label?: string;
|
|
154
|
+
value?: boolean;
|
|
155
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
156
156
|
onChecked?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
157
|
-
disabled?: boolean;
|
|
158
157
|
defaultChecked?: boolean;
|
|
159
|
-
|
|
158
|
+
disabled?: boolean;
|
|
160
159
|
}
|
|
161
|
-
declare const
|
|
160
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
162
161
|
|
|
163
162
|
interface Tab<T> {
|
|
164
163
|
key: T;
|
|
@@ -185,4 +184,24 @@ interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Partial<L
|
|
|
185
184
|
}
|
|
186
185
|
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
187
186
|
|
|
188
|
-
|
|
187
|
+
interface PulseDotProps extends HTMLAttributes<HTMLDivElement> {
|
|
188
|
+
/**
|
|
189
|
+
* Color of the dot
|
|
190
|
+
*/
|
|
191
|
+
color?: string;
|
|
192
|
+
/**
|
|
193
|
+
* CSS width/height values like 10em | 10px | 50%
|
|
194
|
+
*/
|
|
195
|
+
size?: React.CSSProperties['width'];
|
|
196
|
+
/**
|
|
197
|
+
* CSS style object for overriding default styling
|
|
198
|
+
*/
|
|
199
|
+
style?: React.CSSProperties;
|
|
200
|
+
/**
|
|
201
|
+
* className for overriding default styling
|
|
202
|
+
*/
|
|
203
|
+
className?: string;
|
|
204
|
+
}
|
|
205
|
+
declare const PulseDot: React.FC<PulseDotProps>;
|
|
206
|
+
|
|
207
|
+
export { Alert, type AlertProps, Button, type ButtonProps, Checkbox, type CheckboxProps, FlexBox, type FlexBoxProps, Input, InputMeta, type InputMetaProps, type InputProps, MaskInput, type MaskInputProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, PulseDot, type PulseDotProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Tabs, type TabsProps, Text, TextAreaInput, type TextAreaInputProps, TextInput, type TextInputProps, type TextProps, Title, type TitleProps };
|
package/dist/index.js
CHANGED
|
@@ -151,8 +151,8 @@ function styleInject(css, ref) {
|
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
|
|
154
|
-
var css_248z$
|
|
155
|
-
styleInject(css_248z$
|
|
154
|
+
var css_248z$h = ".vchasno-ui-flex-box {\n display: flex;\n flex-direction: row;\n align-content: flex-start;\n gap: 10px;\n}\n";
|
|
155
|
+
styleInject(css_248z$h);
|
|
156
156
|
|
|
157
157
|
var FlexBox = React__default.forwardRef(function (_a, ref) {
|
|
158
158
|
var className = _a.className, _b = _a.tagName, tagName = _b === void 0 ? 'div' : _b, children = _a.children, direction = _a.direction, gap = _a.gap, wrap = _a.wrap, align = _a.align, justify = _a.justify, grow = _a.grow, shrink = _a.shrink, _c = _a.style, style = _c === void 0 ? {} : _c, rest = __rest(_a, ["className", "tagName", "children", "direction", "gap", "wrap", "align", "justify", "grow", "shrink", "style"]);
|
|
@@ -160,8 +160,8 @@ var FlexBox = React__default.forwardRef(function (_a, ref) {
|
|
|
160
160
|
});
|
|
161
161
|
FlexBox.displayName = 'FlexBox';
|
|
162
162
|
|
|
163
|
-
var css_248z$
|
|
164
|
-
styleInject(css_248z$
|
|
163
|
+
var css_248z$g = ".vchasno-ui-spinner {\n position: relative;\n display: inline-block;\n width: 20px;\n height: 20px;\n}\n\n.vchasno-ui-spinner__svg {\n position: absolute;\n width: 100%;\n height: 100%;\n margin: auto;\n animation: spinner-rotate 1.3s linear infinite;\n inset: 0;\n transform-origin: center center;\n}\n\n.vchasno-ui-spinner__svg__circle {\n animation: spinner-rotate-dash 2s ease-in-out infinite;\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n stroke-linecap: round;\n stroke-width: 5px;\n}\n\n@keyframes spinner-rotate {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spinner-rotate-dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n}\n";
|
|
164
|
+
styleInject(css_248z$g);
|
|
165
165
|
|
|
166
166
|
var Spinner = function (_a) {
|
|
167
167
|
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
@@ -170,8 +170,8 @@ var Spinner = function (_a) {
|
|
|
170
170
|
React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
171
171
|
};
|
|
172
172
|
|
|
173
|
-
var css_248z$
|
|
174
|
-
styleInject(css_248z$
|
|
173
|
+
var css_248z$f = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 40px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 3px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n background-color: var(--vchasno-ui-btn-secondary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n border-color: #b6cadb;\n background-color: #b6cadb;\n box-shadow: inset 0 -2px 0 rgb(139 163 182 / 50%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-primary-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: var(--vchasno-ui-btn-secondary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--danger {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n border: 1px solid #b6cadb;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-color);\n transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-light-bg, #fff);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n border: none;\n background-color: rgb(182 202 219 / 20%);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-light-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n";
|
|
174
|
+
styleInject(css_248z$f);
|
|
175
175
|
|
|
176
176
|
var Button = React__default.forwardRef(function (_a, ref) {
|
|
177
177
|
var _b = _a.theme, theme = _b === void 0 ? "primary" : _b, _c = _a.type, type = _c === void 0 ? "button" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, _e = _a.outline, outline = _e === void 0 ? false : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, _g = _a.wide, wide = _g === void 0 ? false : _g, className = _a.className, children = _a.children, rest = __rest(_a, ["theme", "type", "size", "outline", "loading", "wide", "className", "children"]);
|
|
@@ -185,8 +185,8 @@ var Button = React__default.forwardRef(function (_a, ref) {
|
|
|
185
185
|
});
|
|
186
186
|
Button.displayName = "Button";
|
|
187
187
|
|
|
188
|
-
var css_248z$
|
|
189
|
-
styleInject(css_248z$
|
|
188
|
+
var css_248z$e = ".vchasno-ui-meta {\n display: block;\n width: 100%;\n height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint {\n color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n color: var(--vchasno-ui-input-color-error);\n}\n";
|
|
189
|
+
styleInject(css_248z$e);
|
|
190
190
|
|
|
191
191
|
var InputMeta = function (_a) {
|
|
192
192
|
var className = _a.className, error = _a.error, hint = _a.hint;
|
|
@@ -195,8 +195,8 @@ var InputMeta = function (_a) {
|
|
|
195
195
|
error && React__default.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
196
196
|
};
|
|
197
197
|
|
|
198
|
-
var css_248z$
|
|
199
|
-
styleInject(css_248z$
|
|
198
|
+
var css_248z$d = ".vchasno-ui-label-text {\n position: relative;\n display: inline-flex;\n height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n align-self: flex-start;\n color: var(--vchasno-ui-label-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n gap: 3px;\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n text-overflow: ellipsis;\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n white-space: nowrap;\n}\n\n[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--vchasno-ui-input-color-error);\n font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n vertical-align: top;\n}\n\n[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--vchasno-ui-label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n";
|
|
199
|
+
styleInject(css_248z$d);
|
|
200
200
|
|
|
201
201
|
var LabelText = function (_a) {
|
|
202
202
|
var className = _a.className, children = _a.children;
|
|
@@ -209,8 +209,8 @@ var LabelText = function (_a) {
|
|
|
209
209
|
React__default.createElement("sup", null, "*")));
|
|
210
210
|
};
|
|
211
211
|
|
|
212
|
-
var css_248z$
|
|
213
|
-
styleInject(css_248z$
|
|
212
|
+
var css_248z$c = ".vchasno-ui-input {\n display: inline-flex;\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 height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding-right: 33px;\n padding-left: 10px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n gap: 5px;\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}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-color-error);\n background-color: var(--vchasno-ui-input-bg-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
213
|
+
styleInject(css_248z$c);
|
|
214
214
|
|
|
215
215
|
var Input = function (_a) {
|
|
216
216
|
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, labelProps = _a.labelProps, children = _a.children;
|
|
@@ -239,8 +239,8 @@ var reactTextMask = {exports: {}};
|
|
|
239
239
|
var reactTextMaskExports = reactTextMask.exports;
|
|
240
240
|
var MaskedInput = /*@__PURE__*/getDefaultExportFromCjs(reactTextMaskExports);
|
|
241
241
|
|
|
242
|
-
var css_248z$
|
|
243
|
-
styleInject(css_248z$
|
|
242
|
+
var css_248z$b = ".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";
|
|
243
|
+
styleInject(css_248z$b);
|
|
244
244
|
|
|
245
245
|
var MaskInput = function (_a) {
|
|
246
246
|
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, inputClassName = _a.inputClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps"]);
|
|
@@ -263,8 +263,8 @@ var composePaginationSteps = function (total, current) {
|
|
|
263
263
|
return display;
|
|
264
264
|
};
|
|
265
265
|
|
|
266
|
-
var css_248z$
|
|
267
|
-
styleInject(css_248z$
|
|
266
|
+
var css_248z$a = ".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 min-width: var(--vchasno-ui-pagination-size);\n height: var(--vchasno-ui-pagination-size);\n flex-grow: 0;\n flex-shrink: 0;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n line-height: calc(var(--vchasno-ui-pagination-size) - 2px);\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";
|
|
267
|
+
styleInject(css_248z$a);
|
|
268
268
|
|
|
269
269
|
var Pagination = function (_a) {
|
|
270
270
|
var _b, _c;
|
|
@@ -322,8 +322,8 @@ var Pagination = function (_a) {
|
|
|
322
322
|
React__default.createElement("path", { d: "M7 9.99253C7 9.73253 7.1 9.48252 7.29 9.28253L11.29 5.29253C11.68 4.90253 12.32 4.90253 12.71 5.29253C13.1 5.68253 13.1 6.32253 12.71 6.71253L9.42 9.99253L12.71 13.2825C13.1 13.6725 13.1 14.3125 12.71 14.7025C12.32 15.0925 11.68 15.0925 11.29 14.7025L7.3 10.7125C7.1 10.5125 7 10.2525 7 9.99253Z", fill: "currentColor" })))));
|
|
323
323
|
};
|
|
324
324
|
|
|
325
|
-
var css_248z$
|
|
326
|
-
styleInject(css_248z$
|
|
325
|
+
var css_248z$9 = ".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\n.vchasno-ui-text-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
326
|
+
styleInject(css_248z$9);
|
|
327
327
|
|
|
328
328
|
var TextInput = React__default.forwardRef(function (_a, ref) {
|
|
329
329
|
var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, inputClassName = _a.inputClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps"]);
|
|
@@ -332,8 +332,8 @@ var TextInput = React__default.forwardRef(function (_a, ref) {
|
|
|
332
332
|
});
|
|
333
333
|
TextInput.displayName = 'TextInput';
|
|
334
334
|
|
|
335
|
-
var css_248z$
|
|
336
|
-
styleInject(css_248z$
|
|
335
|
+
var css_248z$8 = ".vchasno-ui-text {\n color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-text.--ellipsis {\n display: inline-block;\n overflow: hidden;\n max-width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-text.--secondary {\n color: var(--vchasno-ui-text-secondary-color, #6b8091);\n}\n\n.vchasno-ui-text.--success {\n color: var(--vchasno-ui-text-success-color, #1cb800);\n}\n\n.vchasno-ui-text.--warning {\n color: var(--vchasno-ui-text-warning-color, #ffb200);\n}\n\n.vchasno-ui-text.--danger {\n color: var(--vchasno-ui-text-error-color, #ff5937);\n}\n\n.vchasno-ui-text.--code {\n padding: 0.2em 0.4em 0.1em;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 3px;\n margin: 0 0.2em;\n background: hsl(0deg 0% 58.8% / 10%);\n font-size: 85%;\n}\n\n.vchasno-ui-text.--inherit {\n font-size: inherit;\n}\n\n.vchasno-ui-text.--link,\n.vchasno-ui-text.--like-link {\n color: #087dc1;\n cursor: pointer;\n}\n\n.vchasno-ui-text.--link {\n text-decoration-line: underline;\n}\n\n.vchasno-ui-text.--normal {\n font-size: 1rem;\n line-height: 1.1rem;\n}\n\n.vchasno-ui-text.--small {\n font-size: 0.8rem;\n line-height: 0.9rem;\n}\n\n.vchasno-ui-text.--large {\n font-size: 1.2rem;\n line-height: 1.3rem;\n}\n\n.vchasno-ui-text.--required::after {\n position: relative;\n top: -3px;\n right: -2px;\n color: var(--vchasno-ui-text-error-color, #ff5937);\n content: '*';\n}\n";
|
|
336
|
+
styleInject(css_248z$8);
|
|
337
337
|
|
|
338
338
|
var typeToCN = {
|
|
339
339
|
warning: '--warning',
|
|
@@ -367,8 +367,8 @@ var Text = React__default.forwardRef(function (_a, ref) {
|
|
|
367
367
|
});
|
|
368
368
|
Text.displayName = 'Text';
|
|
369
369
|
|
|
370
|
-
var css_248z$
|
|
371
|
-
styleInject(css_248z$
|
|
370
|
+
var css_248z$7 = ".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";
|
|
371
|
+
styleInject(css_248z$7);
|
|
372
372
|
|
|
373
373
|
var Title = React__default.forwardRef(function (_a, ref) {
|
|
374
374
|
var _b = _a.level, level = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.ellipsis, ellipsis = _c === void 0 ? false : _c, rest = __rest(_a, ["level", "className", "ellipsis"]);
|
|
@@ -389,8 +389,8 @@ var Title = React__default.forwardRef(function (_a, ref) {
|
|
|
389
389
|
});
|
|
390
390
|
Title.displayName = 'Title';
|
|
391
391
|
|
|
392
|
-
var css_248z$
|
|
393
|
-
styleInject(css_248z$
|
|
392
|
+
var css_248z$6 = ".vchasno-ui-paragraph {\n color: var(--vchasno-ui-text-primary-color);\n}\n\n.vchasno-ui-paragraph.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
393
|
+
styleInject(css_248z$6);
|
|
394
394
|
|
|
395
395
|
var Paragraph = React__default.forwardRef(function (_a, ref) {
|
|
396
396
|
var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, rest = __rest(_a, ["ellipsis", "children", "className"]);
|
|
@@ -663,8 +663,8 @@ var index = /* #__PURE__ */forwardRef(TextareaAutosize);
|
|
|
663
663
|
|
|
664
664
|
var TextareaAutosize$1 = index;
|
|
665
665
|
|
|
666
|
-
var css_248z$
|
|
667
|
-
styleInject(css_248z$
|
|
666
|
+
var css_248z$5 = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n height: auto;\n min-height: 40px;\n padding-top: 10px;\n padding-bottom: 10px;\n}\n\n.vchasno-ui-textarea-input {\n width: 100%;\n border: 0;\n color: var(--vchasno-ui-text-primary-color);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n resize: none;\n}\n\n.vchasno-ui-textarea-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-textarea-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
667
|
+
styleInject(css_248z$5);
|
|
668
668
|
|
|
669
669
|
var TextAreaInput = React__default.forwardRef(function (_a, ref) {
|
|
670
670
|
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, textareaClassName = _a.textareaClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "textareaClassName", "labelProps"]);
|
|
@@ -673,8 +673,8 @@ var TextAreaInput = React__default.forwardRef(function (_a, ref) {
|
|
|
673
673
|
});
|
|
674
674
|
TextAreaInput.displayName = 'TextAreaInput';
|
|
675
675
|
|
|
676
|
-
var css_248z$
|
|
677
|
-
styleInject(css_248z$
|
|
676
|
+
var css_248z$4 = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 10px;\n border: 1px solid transparent;\n border-radius: 3px;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 3px;\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}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #087dc1);\n background-color: var(--vchasno-ui-alert-info-bg, #e9f4ff);\n}\n\n.vchasno-ui-alert.--info .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-info-color, #087dc1);\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, rgb(255 201 123 / 20%));\n}\n\n.vchasno-ui-alert.--warning .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-warning-color, #ffb200);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #ef6562);\n background-color: var(--vchasno-ui-alert-error-bg, rgb(239 101 98 / 10%));\n}\n\n.vchasno-ui-alert.--error .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-error-color, #ef6562);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #1cb800);\n background-color: var(--vchasno-ui-alert-success-bg, rgb(28 184 0 / 10%));\n}\n\n.vchasno-ui-alert.--success .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-success-color, #1cb800);\n}\n\n.vchasno-ui-alert__close-icon {\n border-radius: 3px;\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(0 0 0 / 10%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
|
|
677
|
+
styleInject(css_248z$4);
|
|
678
678
|
|
|
679
679
|
var iconMap = {
|
|
680
680
|
info: function () { return (React__default.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -711,32 +711,31 @@ var Alert = function (_a) {
|
|
|
711
711
|
closeNode));
|
|
712
712
|
};
|
|
713
713
|
|
|
714
|
-
var css_248z$
|
|
715
|
-
styleInject(css_248z$
|
|
714
|
+
var css_248z$3 = ".vchasno-ui-switch {\n display: inline-flex;\n align-content: center;\n cursor: pointer;\n line-height: 20px;\n}\n\n.vchasno-ui-switch--bg {\n position: relative;\n z-index: 0;\n display: inline-flex;\n width: 36px;\n height: 20px;\n box-sizing: border-box;\n flex-shrink: 0;\n border-radius: 100px;\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 width: 16px;\n height: 16px;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\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-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 line-height: 20px;\n user-select: none;\n}\n";
|
|
715
|
+
styleInject(css_248z$3);
|
|
716
716
|
|
|
717
|
-
var
|
|
718
|
-
var
|
|
719
|
-
var
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
React__default.createElement("span", { className: "vchasno-ui-slider" })));
|
|
717
|
+
var Switch = React__default.forwardRef(function (_a, ref) {
|
|
718
|
+
var className = _a.className, label = _a.label, onChange = _a.onChange, onChecked = _a.onChecked, value = _a.value, _b = _a.defaultChecked, defaultChecked = _b === void 0 ? false : _b, disabled = _a.disabled, loading = _a.loading, id = _a.id, rest = __rest(_a, ["className", "label", "onChange", "onChecked", "value", "defaultChecked", "disabled", "loading", "id"]);
|
|
719
|
+
var _c = useState(defaultChecked), checked = _c[0], setChecked = _c[1];
|
|
720
|
+
var isFullParentControlled = typeof value === 'boolean';
|
|
721
|
+
var inputChecked = isFullParentControlled ? value : checked;
|
|
722
|
+
var handleChange = function (event) {
|
|
723
|
+
if (!isFullParentControlled) {
|
|
724
|
+
setChecked(function () { return event.target.checked; });
|
|
725
|
+
}
|
|
726
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
727
|
+
onChecked === null || onChecked === void 0 ? void 0 : onChecked(event.target.checked, event);
|
|
728
|
+
};
|
|
729
|
+
return (React__default.createElement("label", { className: cn('vchasno-ui-switch', { 'vchasno-ui-switch__active': inputChecked, 'vchasno-ui-switch__disabled': disabled }, className) },
|
|
730
|
+
React__default.createElement("span", { className: "vchasno-ui-switch--bg" },
|
|
731
|
+
React__default.createElement("input", __assign({}, rest, { ref: ref, disabled: disabled, id: id, type: "checkbox", hidden: true, onChange: handleChange, checked: inputChecked })),
|
|
732
|
+
React__default.createElement("span", { className: "vchasno-ui-switch--circle" }, loading && React__default.createElement(Spinner, { width: 16 }))),
|
|
733
|
+
label && React__default.createElement("span", { className: "vchasno-ui-switch--label" }, label)));
|
|
735
734
|
});
|
|
736
|
-
|
|
735
|
+
Switch.displayName = 'Switch';
|
|
737
736
|
|
|
738
|
-
var css_248z$
|
|
739
|
-
styleInject(css_248z$
|
|
737
|
+
var css_248z$2 = ".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";
|
|
738
|
+
styleInject(css_248z$2);
|
|
740
739
|
|
|
741
740
|
var Tabs = function (_a) {
|
|
742
741
|
var _b, _c;
|
|
@@ -805,8 +804,8 @@ var Tabs = function (_a) {
|
|
|
805
804
|
React__default.createElement(Spinner, { color: "var(--vchasno-ui-tabs-active-color, #087dc1)" })))));
|
|
806
805
|
};
|
|
807
806
|
|
|
808
|
-
var css_248z = ".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";
|
|
809
|
-
styleInject(css_248z);
|
|
807
|
+
var css_248z$1 = ".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";
|
|
808
|
+
styleInject(css_248z$1);
|
|
810
809
|
|
|
811
810
|
var Checkbox = React__default.forwardRef(function (_a, ref) {
|
|
812
811
|
var className = _a.className, label = _a.label, partial = _a.partial, disabled = _a.disabled, loading = _a.loading, rest = __rest(_a, ["className", "label", "partial", "disabled", "loading"]);
|
|
@@ -824,5 +823,13 @@ var Checkbox = React__default.forwardRef(function (_a, ref) {
|
|
|
824
823
|
});
|
|
825
824
|
Checkbox.displayName = 'Checkbox';
|
|
826
825
|
|
|
827
|
-
|
|
826
|
+
var css_248z = ".vchasno-ui-PulseDot {\n position: relative;\n width: var(--vchasno-ui-pulse-dot-size);\n height: var(--vchasno-ui-pulse-dot-size);\n border-radius: 50%;\n background-color: var(--vchasno-ui-pulse-dot-color);\n}\n\n.vchasno-ui-PulseDot::before,\n.vchasno-ui-PulseDot::after {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: inherit;\n content: '';\n pointer-events: none;\n}\n\n.vchasno-ui-PulseDot::before {\n animation: pulse 2s ease-out infinite;\n}\n\n.vchasno-ui-PulseDot::after {\n animation: pulse 2s 1s ease-out infinite;\n}\n\n@keyframes pulse {\n 100% {\n opacity: 0;\n transform: scale(2);\n }\n}\n";
|
|
827
|
+
styleInject(css_248z);
|
|
828
|
+
|
|
829
|
+
var PulseDot = function (_a) {
|
|
830
|
+
var className = _a.className, color = _a.color, style = _a.style, size = _a.size, rest = __rest(_a, ["className", "color", "style", "size"]);
|
|
831
|
+
return (React__default.createElement("div", __assign({ className: cn('vchasno-ui-PulseDot', className), style: __assign({ background: color, width: size, height: size }, style) }, rest)));
|
|
832
|
+
};
|
|
833
|
+
|
|
834
|
+
export { Alert, Button, Checkbox, FlexBox, Input, InputMeta, MaskInput, Pagination, Paragraph, PulseDot, Spinner, Switch, Tabs, Text, TextAreaInput, TextInput, Title };
|
|
828
835
|
//# sourceMappingURL=index.js.map
|