@vchasno/ui-kit 0.2.6 → 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 +7 -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/index.d.ts +2 -0
- 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/index.d.ts +2 -0
- 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/index.d.ts +2 -0
- package/dist/css/_theme.css +2 -0
- package/dist/index.d.ts +21 -1
- package/dist/index.js +43 -35
- 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/index.d.ts +2 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,12 @@ 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
|
+
|
|
10
16
|
## [0.2.6] - 2024-02-14
|
|
11
17
|
|
|
12
18
|
## Fixed
|
|
@@ -107,4 +113,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
107
113
|
|
|
108
114
|
### Added
|
|
109
115
|
|
|
110
|
-
- 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;
|
|
@@ -30,3 +30,5 @@ 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;
|
|
@@ -30,3 +30,5 @@ 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;
|
|
@@ -30,3 +30,5 @@ 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
package/dist/index.d.ts
CHANGED
|
@@ -184,4 +184,24 @@ interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Partial<L
|
|
|
184
184
|
}
|
|
185
185
|
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
186
186
|
|
|
187
|
-
|
|
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,8 +711,8 @@ 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
717
|
var Switch = React__default.forwardRef(function (_a, ref) {
|
|
718
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"]);
|
|
@@ -734,8 +734,8 @@ var Switch = React__default.forwardRef(function (_a, ref) {
|
|
|
734
734
|
});
|
|
735
735
|
Switch.displayName = 'Switch';
|
|
736
736
|
|
|
737
|
-
var css_248z$
|
|
738
|
-
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);
|
|
739
739
|
|
|
740
740
|
var Tabs = function (_a) {
|
|
741
741
|
var _b, _c;
|
|
@@ -804,8 +804,8 @@ var Tabs = function (_a) {
|
|
|
804
804
|
React__default.createElement(Spinner, { color: "var(--vchasno-ui-tabs-active-color, #087dc1)" })))));
|
|
805
805
|
};
|
|
806
806
|
|
|
807
|
-
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";
|
|
808
|
-
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);
|
|
809
809
|
|
|
810
810
|
var Checkbox = React__default.forwardRef(function (_a, ref) {
|
|
811
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"]);
|
|
@@ -823,5 +823,13 @@ var Checkbox = React__default.forwardRef(function (_a, ref) {
|
|
|
823
823
|
});
|
|
824
824
|
Checkbox.displayName = 'Checkbox';
|
|
825
825
|
|
|
826
|
-
|
|
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 };
|
|
827
835
|
//# sourceMappingURL=index.js.map
|