@vchasno/ui-kit 0.3.4 → 0.3.6
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 -0
- package/dist/Datepicker/types/components/Paragraph/Paragraph.d.ts +3 -2
- package/dist/Datepicker/types/components/ProjectsPopover/mappers.d.ts +1 -1
- package/dist/Datepicker/types/components/ProjectsPopover/types.d.ts +3 -2
- package/dist/Datepicker/types/components/Title/Title.d.ts +3 -2
- package/dist/Datepicker/types/components/types.d.ts +4 -0
- package/dist/Menu/types/components/Paragraph/Paragraph.d.ts +3 -2
- package/dist/Menu/types/components/ProjectsPopover/mappers.d.ts +1 -1
- package/dist/Menu/types/components/ProjectsPopover/types.d.ts +3 -2
- package/dist/Menu/types/components/Title/Title.d.ts +3 -2
- package/dist/Menu/types/components/types.d.ts +4 -0
- package/dist/ProjectsPopover/index.cjs.js +10 -1
- package/dist/ProjectsPopover/index.cjs.js.map +1 -1
- package/dist/ProjectsPopover/index.d.ts +1 -1
- package/dist/ProjectsPopover/index.js +10 -1
- package/dist/ProjectsPopover/index.js.map +1 -1
- package/dist/ProjectsPopover/types/components/Paragraph/Paragraph.d.ts +3 -2
- package/dist/ProjectsPopover/types/components/ProjectsPopover/mappers.d.ts +1 -1
- package/dist/ProjectsPopover/types/components/ProjectsPopover/types.d.ts +3 -2
- package/dist/ProjectsPopover/types/components/Title/Title.d.ts +3 -2
- package/dist/ProjectsPopover/types/components/types.d.ts +4 -0
- package/dist/Select/types/components/Paragraph/Paragraph.d.ts +3 -2
- package/dist/Select/types/components/ProjectsPopover/mappers.d.ts +1 -1
- package/dist/Select/types/components/ProjectsPopover/types.d.ts +3 -2
- package/dist/Select/types/components/Title/Title.d.ts +3 -2
- package/dist/Select/types/components/types.d.ts +4 -0
- package/dist/SelectCreatable/types/components/Paragraph/Paragraph.d.ts +3 -2
- package/dist/SelectCreatable/types/components/ProjectsPopover/mappers.d.ts +1 -1
- package/dist/SelectCreatable/types/components/ProjectsPopover/types.d.ts +3 -2
- package/dist/SelectCreatable/types/components/Title/Title.d.ts +3 -2
- package/dist/SelectCreatable/types/components/types.d.ts +4 -0
- package/dist/Snackbar/index.cjs.js +28 -25
- package/dist/Snackbar/index.cjs.js.map +1 -1
- package/dist/Snackbar/index.js +28 -25
- package/dist/Snackbar/index.js.map +1 -1
- package/dist/Snackbar/types/components/Paragraph/Paragraph.d.ts +3 -2
- package/dist/Snackbar/types/components/ProjectsPopover/mappers.d.ts +1 -1
- package/dist/Snackbar/types/components/ProjectsPopover/types.d.ts +3 -2
- package/dist/Snackbar/types/components/Title/Title.d.ts +3 -2
- package/dist/Snackbar/types/components/types.d.ts +4 -0
- package/dist/index.d.ts +6 -2
- package/dist/index.js +27 -24
- package/dist/index.js.map +1 -1
- package/dist/types/components/Paragraph/Paragraph.d.ts +3 -2
- package/dist/types/components/ProjectsPopover/mappers.d.ts +1 -1
- package/dist/types/components/ProjectsPopover/types.d.ts +3 -2
- package/dist/types/components/Title/Title.d.ts +3 -2
- package/dist/types/components/types.d.ts +4 -0
- package/package.json +1 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { HTMLAttributes } from 'react';
|
|
2
|
-
import { EllipsisText } from '../types';
|
|
2
|
+
import { EllipsisText, TextAlign } from '../types';
|
|
3
|
+
import '../../styles/typography.global.css';
|
|
3
4
|
import './Paragraph.global.css';
|
|
4
|
-
export interface ParagraphProps extends EllipsisText, HTMLAttributes<HTMLParagraphElement> {
|
|
5
|
+
export interface ParagraphProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLParagraphElement> {
|
|
5
6
|
className?: string;
|
|
6
7
|
children: React.ReactNode;
|
|
7
8
|
}
|
|
@@ -3,4 +3,4 @@ import { AllProducts, VchasnoProduct, ZakupivliProduct } from './types';
|
|
|
3
3
|
export declare const hrefMap: Record<VchasnoProduct | ZakupivliProduct, string>;
|
|
4
4
|
export declare const tooltipHintMap: Record<AllProducts, string>;
|
|
5
5
|
export declare const titleMap: Record<VchasnoProduct, string>;
|
|
6
|
-
export declare const iconMap: Record<VchasnoProduct | ZakupivliProduct, React.ReactElement>;
|
|
6
|
+
export declare const iconMap: Record<VchasnoProduct | ZakupivliProduct, React.ReactElement | null>;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
export declare const vchasnoProductsList: readonly ["edo", "kep", "kasa", "edi", "ttn"];
|
|
1
|
+
export declare const vchasnoProductsList: readonly ["edo", "kep", "kasa", "edi", "ttn", "dm"];
|
|
2
|
+
export declare const vchasnoProductsWithoutSiteList: readonly ["dm"];
|
|
2
3
|
export declare const zakupivliProductsList: readonly ["zakupivli", "prozorroSale", "prozorroMarket", "prozorroRRO"];
|
|
3
4
|
export type VchasnoProduct = (typeof vchasnoProductsList)[number];
|
|
4
|
-
export declare const isVchasnoProduct: (product: string) => product is "edo" | "edi" | "ttn" | "kep" | "kasa";
|
|
5
|
+
export declare const isVchasnoProduct: (product: string) => product is "edo" | "edi" | "ttn" | "kep" | "kasa" | "dm";
|
|
5
6
|
export type ZakupivliProduct = (typeof zakupivliProductsList)[number];
|
|
6
7
|
export declare const isZakupivliProduct: (product: string) => product is "zakupivli" | "prozorroSale" | "prozorroMarket" | "prozorroRRO";
|
|
7
8
|
export type AllProducts = VchasnoProduct | ZakupivliProduct;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { HTMLAttributes } from 'react';
|
|
2
|
-
import
|
|
2
|
+
import { EllipsisText, TextAlign } from '../types';
|
|
3
|
+
import '../../styles/typography.global.css';
|
|
3
4
|
import './Title.global.css';
|
|
4
|
-
export interface TitleProps extends EllipsisText, HTMLAttributes<HTMLHeadingElement> {
|
|
5
|
+
export interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement> {
|
|
5
6
|
level?: 1 | 2 | 3 | 4 | 5;
|
|
6
7
|
className?: string;
|
|
7
8
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -43,6 +43,10 @@ interface EllipsisText {
|
|
|
43
43
|
/** для скорочення тексту і виведення 3 точок */
|
|
44
44
|
ellipsis?: boolean;
|
|
45
45
|
}
|
|
46
|
+
interface TextAlign {
|
|
47
|
+
/** для центрування тексту **/
|
|
48
|
+
textAlign?: 'center' | 'start' | 'end' | 'justify';
|
|
49
|
+
}
|
|
46
50
|
|
|
47
51
|
type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
|
|
48
52
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
|
|
@@ -107,13 +111,13 @@ interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText {
|
|
|
107
111
|
}
|
|
108
112
|
declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
|
|
109
113
|
|
|
110
|
-
interface TitleProps extends EllipsisText, HTMLAttributes<HTMLHeadingElement> {
|
|
114
|
+
interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement> {
|
|
111
115
|
level?: 1 | 2 | 3 | 4 | 5;
|
|
112
116
|
className?: string;
|
|
113
117
|
}
|
|
114
118
|
declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
115
119
|
|
|
116
|
-
interface ParagraphProps extends EllipsisText, HTMLAttributes<HTMLParagraphElement> {
|
|
120
|
+
interface ParagraphProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLParagraphElement> {
|
|
117
121
|
className?: string;
|
|
118
122
|
children: React.ReactNode;
|
|
119
123
|
}
|
package/dist/index.js
CHANGED
|
@@ -217,8 +217,8 @@ function styleInject(css, ref) {
|
|
|
217
217
|
}
|
|
218
218
|
}
|
|
219
219
|
|
|
220
|
-
var css_248z$
|
|
221
|
-
styleInject(css_248z$
|
|
220
|
+
var css_248z$l = ".vchasno-ui-flex-box {\n display: flex;\n max-width: 100%;\n flex-direction: row;\n align-content: flex-start;\n gap: 10px;\n}\n";
|
|
221
|
+
styleInject(css_248z$l);
|
|
222
222
|
|
|
223
223
|
var FlexBox = React$1.forwardRef(function (_a, ref) {
|
|
224
224
|
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"]);
|
|
@@ -226,8 +226,8 @@ var FlexBox = React$1.forwardRef(function (_a, ref) {
|
|
|
226
226
|
});
|
|
227
227
|
FlexBox.displayName = 'FlexBox';
|
|
228
228
|
|
|
229
|
-
var css_248z$
|
|
230
|
-
styleInject(css_248z$
|
|
229
|
+
var css_248z$k = ".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";
|
|
230
|
+
styleInject(css_248z$k);
|
|
231
231
|
|
|
232
232
|
var Spinner = function (_a) {
|
|
233
233
|
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
@@ -236,8 +236,8 @@ var Spinner = function (_a) {
|
|
|
236
236
|
React$1.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
237
237
|
};
|
|
238
238
|
|
|
239
|
-
var css_248z$
|
|
240
|
-
styleInject(css_248z$
|
|
239
|
+
var css_248z$j = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 50px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 8px;\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";
|
|
240
|
+
styleInject(css_248z$j);
|
|
241
241
|
|
|
242
242
|
var Button = React$1.forwardRef(function (_a, ref) {
|
|
243
243
|
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"]);
|
|
@@ -251,8 +251,8 @@ var Button = React$1.forwardRef(function (_a, ref) {
|
|
|
251
251
|
});
|
|
252
252
|
Button.displayName = 'Button';
|
|
253
253
|
|
|
254
|
-
var css_248z$
|
|
255
|
-
styleInject(css_248z$
|
|
254
|
+
var css_248z$i = ".vchasno-ui-meta {\n display: block;\n max-width: 100%;\n height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n padding-left: 16px;\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.vchasno-ui-meta__error {\n display: inline-block;\n overflow: hidden;\n max-width: inherit;\n text-overflow: ellipsis;\n white-space: nowrap;\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";
|
|
255
|
+
styleInject(css_248z$i);
|
|
256
256
|
|
|
257
257
|
var InputMeta = function (_a) {
|
|
258
258
|
var className = _a.className, error = _a.error, hint = _a.hint;
|
|
@@ -261,8 +261,8 @@ var InputMeta = function (_a) {
|
|
|
261
261
|
error && React$1.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
262
262
|
};
|
|
263
263
|
|
|
264
|
-
var css_248z$
|
|
265
|
-
styleInject(css_248z$
|
|
264
|
+
var css_248z$h = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 4px;\n background-color: #fff;\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 pointer-events: none;\n text-overflow: ellipsis;\n transform: translate(0, -50%);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s), top 0.3s, font-size 0.3s;\n white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\nlabel[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\nlabel[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n top: 0;\n font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: text;\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\nlabel[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\n.vchasno-ui-label-text__content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
265
|
+
styleInject(css_248z$h);
|
|
266
266
|
|
|
267
267
|
var LabelText = function (_a) {
|
|
268
268
|
var className = _a.className, children = _a.children;
|
|
@@ -275,8 +275,8 @@ var LabelText = function (_a) {
|
|
|
275
275
|
React$1.createElement("sup", null, "*")));
|
|
276
276
|
};
|
|
277
277
|
|
|
278
|
-
var css_248z$
|
|
279
|
-
styleInject(css_248z$
|
|
278
|
+
var css_248z$g = ".vchasno-ui-input {\n display: inline-flex;\n max-width: 100%;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n visibility: hidden;\n}\n\n.vchasno-ui-input input:focus::placeholder {\n visibility: visible;\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: 50px;\n box-sizing: border-box;\n align-items: center;\n padding-right: 33px;\n padding-left: 16px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n background-color: var(--vchasno-ui-input-bg-color);\n outline: solid 3px transparent;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n font-size: var(--vchasno-ui-input-font-size, 14px);\n line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n position: absolute;\n top: 10px;\n right: 10px;\n display: block;\n width: 18px;\n height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n background-color: var(--vchasno-ui-input-bg-color-disabled);\n color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-border-color-focused);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-color-error);\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
279
|
+
styleInject(css_248z$g);
|
|
280
280
|
|
|
281
281
|
var Input = function (_a) {
|
|
282
282
|
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;
|
|
@@ -305,8 +305,8 @@ var reactTextMask = {exports: {}};
|
|
|
305
305
|
var reactTextMaskExports = reactTextMask.exports;
|
|
306
306
|
var MaskedInput = /*@__PURE__*/getDefaultExportFromCjs(reactTextMaskExports);
|
|
307
307
|
|
|
308
|
-
var css_248z$
|
|
309
|
-
styleInject(css_248z$
|
|
308
|
+
var css_248z$f = ".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";
|
|
309
|
+
styleInject(css_248z$f);
|
|
310
310
|
|
|
311
311
|
var MaskInput = function (_a) {
|
|
312
312
|
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"]);
|
|
@@ -329,8 +329,8 @@ var composePaginationSteps = function (total, current) {
|
|
|
329
329
|
return display;
|
|
330
330
|
};
|
|
331
331
|
|
|
332
|
-
var css_248z$
|
|
333
|
-
styleInject(css_248z$
|
|
332
|
+
var css_248z$e = ".vchasno-ui-pagination {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n display: flex;\n min-width: var(--vchasno-ui-pagination-size);\n height: var(--vchasno-ui-pagination-size);\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n outline: 0;\n text-align: center;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-pagination__item-hidden {\n display: none;\n}\n";
|
|
333
|
+
styleInject(css_248z$e);
|
|
334
334
|
|
|
335
335
|
var Pagination = function (_a) {
|
|
336
336
|
var _b, _c;
|
|
@@ -391,8 +391,8 @@ var Pagination = function (_a) {
|
|
|
391
391
|
React$1.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" })))));
|
|
392
392
|
};
|
|
393
393
|
|
|
394
|
-
var css_248z$
|
|
395
|
-
styleInject(css_248z$
|
|
394
|
+
var css_248z$d = ".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";
|
|
395
|
+
styleInject(css_248z$d);
|
|
396
396
|
|
|
397
397
|
var TextInput = React$1.forwardRef(function (_a, ref) {
|
|
398
398
|
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, _b = _a.placeholder, placeholder = _b === void 0 ? ' ' : _b, //need "space" for correct label working
|
|
@@ -402,8 +402,8 @@ var TextInput = React$1.forwardRef(function (_a, ref) {
|
|
|
402
402
|
});
|
|
403
403
|
TextInput.displayName = 'TextInput';
|
|
404
404
|
|
|
405
|
-
var css_248z$
|
|
406
|
-
styleInject(css_248z$
|
|
405
|
+
var css_248z$c = ".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";
|
|
406
|
+
styleInject(css_248z$c);
|
|
407
407
|
|
|
408
408
|
var typeToCN = {
|
|
409
409
|
warning: '--warning',
|
|
@@ -437,12 +437,15 @@ var Text = React$1.forwardRef(function (_a, ref) {
|
|
|
437
437
|
});
|
|
438
438
|
Text.displayName = 'Text';
|
|
439
439
|
|
|
440
|
+
var css_248z$b = ".--text-start {\n text-align: start;\n}\n\n.--text-center {\n text-align: center;\n}\n\n.--text-end {\n text-align: end;\n}\n\n.--text-justify {\n text-align: justify;\n}\n";
|
|
441
|
+
styleInject(css_248z$b);
|
|
442
|
+
|
|
440
443
|
var css_248z$a = ".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";
|
|
441
444
|
styleInject(css_248z$a);
|
|
442
445
|
|
|
443
446
|
var Title = React$1.forwardRef(function (_a, ref) {
|
|
444
|
-
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"]);
|
|
445
|
-
var classes = cn('vchasno-ui-title', className, { '--ellipsis': ellipsis });
|
|
447
|
+
var _b = _a.level, level = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.ellipsis, ellipsis = _c === void 0 ? false : _c, textAlign = _a.textAlign, rest = __rest(_a, ["level", "className", "ellipsis", "textAlign"]);
|
|
448
|
+
var classes = cn('vchasno-ui-title', className, { '--ellipsis': ellipsis }, textAlign && "--text-".concat(textAlign));
|
|
446
449
|
switch (level) {
|
|
447
450
|
case 2:
|
|
448
451
|
return React$1.createElement("h2", __assign({}, rest, { ref: ref, className: classes }));
|
|
@@ -463,8 +466,8 @@ var css_248z$9 = ".vchasno-ui-paragraph {\n color: var(--vchasno-ui-text-prim
|
|
|
463
466
|
styleInject(css_248z$9);
|
|
464
467
|
|
|
465
468
|
var Paragraph = React$1.forwardRef(function (_a, ref) {
|
|
466
|
-
var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, rest = __rest(_a, ["ellipsis", "children", "className"]);
|
|
467
|
-
return (React$1.createElement("p", __assign({ ref: ref, title: ellipsis && typeof children === 'string' ? children : undefined, className: cn('vchasno-ui-paragraph', className, { '--ellipsis': ellipsis }) }, rest), children));
|
|
469
|
+
var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, textAlign = _a.textAlign, rest = __rest(_a, ["ellipsis", "children", "className", "textAlign"]);
|
|
470
|
+
return (React$1.createElement("p", __assign({ ref: ref, title: ellipsis && typeof children === 'string' ? children : undefined, className: cn('vchasno-ui-paragraph', className, { '--ellipsis': ellipsis }, textAlign && "--text-".concat(textAlign)) }, rest), children));
|
|
468
471
|
});
|
|
469
472
|
Paragraph.displayName = 'Paragraph';
|
|
470
473
|
|