@vchasno/ui-kit 0.2.10 → 0.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/README.md +38 -20
- package/dist/Datepicker/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/Datepicker/types/components/Select/Select.d.ts +27 -0
- package/dist/Datepicker/types/components/Select/index.d.ts +1 -3
- package/dist/Datepicker/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/Datepicker/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/Datepicker/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/Datepicker/types/components/index.d.ts +3 -1
- package/dist/Datepicker/types/{components/BubbleBox → hooks}/useClientRect.d.ts +1 -1
- package/dist/Datepicker/types/index.d.ts +1 -0
- package/dist/Datepicker/types/utils/react.d.ts +6 -0
- package/dist/Select/index.cjs.js +5 -1
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.d.ts +34 -2
- package/dist/Select/index.js +2 -1
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/Select/types/components/Select/Select.d.ts +27 -0
- package/dist/Select/types/components/Select/index.d.ts +1 -3
- package/dist/Select/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/Select/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/Select/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/Select/types/components/index.d.ts +3 -1
- package/dist/Select/types/{components/BubbleBox → hooks}/useClientRect.d.ts +1 -1
- package/dist/Select/types/index.d.ts +1 -0
- package/dist/Select/types/utils/react.d.ts +6 -0
- package/dist/SelectCreatable/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/SelectCreatable/types/components/Select/Select.d.ts +27 -0
- package/dist/SelectCreatable/types/components/Select/index.d.ts +1 -3
- package/dist/SelectCreatable/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/SelectCreatable/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/SelectCreatable/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/SelectCreatable/types/components/index.d.ts +3 -1
- package/dist/SelectCreatable/types/{components/BubbleBox → hooks}/useClientRect.d.ts +1 -1
- package/dist/SelectCreatable/types/index.d.ts +1 -0
- package/dist/SelectCreatable/types/utils/react.d.ts +6 -0
- package/dist/index.d.ts +26 -1
- package/dist/index.js +105 -40
- package/dist/index.js.map +1 -1
- package/dist/types/components/BubbleBox/index.d.ts +1 -0
- package/dist/types/components/Select/Select.d.ts +27 -0
- package/dist/types/components/Select/index.d.ts +1 -3
- package/dist/types/components/SvgBorder/SvgBorder.d.ts +18 -0
- package/dist/types/components/SvgBorder/index.d.ts +3 -0
- package/dist/types/components/SvgBorder/utils.d.ts +1 -0
- package/dist/types/components/index.d.ts +3 -1
- package/dist/types/{components/BubbleBox → hooks}/useClientRect.d.ts +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/utils/react.d.ts +6 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -171,8 +171,8 @@ function styleInject(css, ref) {
|
|
|
171
171
|
}
|
|
172
172
|
}
|
|
173
173
|
|
|
174
|
-
var css_248z$
|
|
175
|
-
styleInject(css_248z$
|
|
174
|
+
var css_248z$j = ".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";
|
|
175
|
+
styleInject(css_248z$j);
|
|
176
176
|
|
|
177
177
|
var FlexBox = React.forwardRef(function (_a, ref) {
|
|
178
178
|
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"]);
|
|
@@ -180,8 +180,8 @@ var FlexBox = React.forwardRef(function (_a, ref) {
|
|
|
180
180
|
});
|
|
181
181
|
FlexBox.displayName = 'FlexBox';
|
|
182
182
|
|
|
183
|
-
var css_248z$
|
|
184
|
-
styleInject(css_248z$
|
|
183
|
+
var css_248z$i = ".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";
|
|
184
|
+
styleInject(css_248z$i);
|
|
185
185
|
|
|
186
186
|
var Spinner = function (_a) {
|
|
187
187
|
var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
|
|
@@ -190,8 +190,8 @@ var Spinner = function (_a) {
|
|
|
190
190
|
React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
191
191
|
};
|
|
192
192
|
|
|
193
|
-
var css_248z$
|
|
194
|
-
styleInject(css_248z$
|
|
193
|
+
var css_248z$h = ".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";
|
|
194
|
+
styleInject(css_248z$h);
|
|
195
195
|
|
|
196
196
|
var Button = React.forwardRef(function (_a, ref) {
|
|
197
197
|
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"]);
|
|
@@ -205,8 +205,8 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
205
205
|
});
|
|
206
206
|
Button.displayName = "Button";
|
|
207
207
|
|
|
208
|
-
var css_248z$
|
|
209
|
-
styleInject(css_248z$
|
|
208
|
+
var css_248z$g = ".vchasno-ui-meta {\n display: block;\n max-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.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";
|
|
209
|
+
styleInject(css_248z$g);
|
|
210
210
|
|
|
211
211
|
var InputMeta = function (_a) {
|
|
212
212
|
var className = _a.className, error = _a.error, hint = _a.hint;
|
|
@@ -215,8 +215,8 @@ var InputMeta = function (_a) {
|
|
|
215
215
|
error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
216
216
|
};
|
|
217
217
|
|
|
218
|
-
var css_248z$
|
|
219
|
-
styleInject(css_248z$
|
|
218
|
+
var css_248z$f = ".vchasno-ui-label-text {\n position: relative;\n display: inline-flex;\n max-width: 100%;\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\n.vchasno-ui-label-text__content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
219
|
+
styleInject(css_248z$f);
|
|
220
220
|
|
|
221
221
|
var LabelText = function (_a) {
|
|
222
222
|
var className = _a.className, children = _a.children;
|
|
@@ -229,8 +229,8 @@ var LabelText = function (_a) {
|
|
|
229
229
|
React.createElement("sup", null, "*")));
|
|
230
230
|
};
|
|
231
231
|
|
|
232
|
-
var css_248z$
|
|
233
|
-
styleInject(css_248z$
|
|
232
|
+
var css_248z$e = ".vchasno-ui-input {\n display: inline-flex;\n max-width: 100%;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n position: relative;\n display: flex;\n 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";
|
|
233
|
+
styleInject(css_248z$e);
|
|
234
234
|
|
|
235
235
|
var Input = function (_a) {
|
|
236
236
|
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;
|
|
@@ -259,8 +259,8 @@ var reactTextMask = {exports: {}};
|
|
|
259
259
|
var reactTextMaskExports = reactTextMask.exports;
|
|
260
260
|
var MaskedInput = /*@__PURE__*/getDefaultExportFromCjs(reactTextMaskExports);
|
|
261
261
|
|
|
262
|
-
var css_248z$
|
|
263
|
-
styleInject(css_248z$
|
|
262
|
+
var css_248z$d = ".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";
|
|
263
|
+
styleInject(css_248z$d);
|
|
264
264
|
|
|
265
265
|
var MaskInput = function (_a) {
|
|
266
266
|
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"]);
|
|
@@ -283,8 +283,8 @@ var composePaginationSteps = function (total, current) {
|
|
|
283
283
|
return display;
|
|
284
284
|
};
|
|
285
285
|
|
|
286
|
-
var css_248z$
|
|
287
|
-
styleInject(css_248z$
|
|
286
|
+
var css_248z$c = ".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";
|
|
287
|
+
styleInject(css_248z$c);
|
|
288
288
|
|
|
289
289
|
var Pagination = function (_a) {
|
|
290
290
|
var _b, _c;
|
|
@@ -345,8 +345,8 @@ var Pagination = function (_a) {
|
|
|
345
345
|
React.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" })))));
|
|
346
346
|
};
|
|
347
347
|
|
|
348
|
-
var css_248z$
|
|
349
|
-
styleInject(css_248z$
|
|
348
|
+
var css_248z$b = ".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";
|
|
349
|
+
styleInject(css_248z$b);
|
|
350
350
|
|
|
351
351
|
var TextInput = React.forwardRef(function (_a, ref) {
|
|
352
352
|
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"]);
|
|
@@ -355,8 +355,8 @@ var TextInput = React.forwardRef(function (_a, ref) {
|
|
|
355
355
|
});
|
|
356
356
|
TextInput.displayName = 'TextInput';
|
|
357
357
|
|
|
358
|
-
var css_248z$
|
|
359
|
-
styleInject(css_248z$
|
|
358
|
+
var css_248z$a = ".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";
|
|
359
|
+
styleInject(css_248z$a);
|
|
360
360
|
|
|
361
361
|
var typeToCN = {
|
|
362
362
|
warning: '--warning',
|
|
@@ -390,8 +390,8 @@ var Text = React.forwardRef(function (_a, ref) {
|
|
|
390
390
|
});
|
|
391
391
|
Text.displayName = 'Text';
|
|
392
392
|
|
|
393
|
-
var css_248z$
|
|
394
|
-
styleInject(css_248z$
|
|
393
|
+
var css_248z$9 = ".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";
|
|
394
|
+
styleInject(css_248z$9);
|
|
395
395
|
|
|
396
396
|
var Title = React.forwardRef(function (_a, ref) {
|
|
397
397
|
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"]);
|
|
@@ -412,8 +412,8 @@ var Title = React.forwardRef(function (_a, ref) {
|
|
|
412
412
|
});
|
|
413
413
|
Title.displayName = 'Title';
|
|
414
414
|
|
|
415
|
-
var css_248z$
|
|
416
|
-
styleInject(css_248z$
|
|
415
|
+
var css_248z$8 = ".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";
|
|
416
|
+
styleInject(css_248z$8);
|
|
417
417
|
|
|
418
418
|
var Paragraph = React.forwardRef(function (_a, ref) {
|
|
419
419
|
var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, rest = __rest(_a, ["ellipsis", "children", "className"]);
|
|
@@ -686,8 +686,8 @@ var index = /* #__PURE__ */React.forwardRef(TextareaAutosize);
|
|
|
686
686
|
|
|
687
687
|
var TextareaAutosize$1 = index;
|
|
688
688
|
|
|
689
|
-
var css_248z$
|
|
690
|
-
styleInject(css_248z$
|
|
689
|
+
var css_248z$7 = ".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";
|
|
690
|
+
styleInject(css_248z$7);
|
|
691
691
|
|
|
692
692
|
var TextAreaInput = React.forwardRef(function (_a, ref) {
|
|
693
693
|
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"]);
|
|
@@ -696,8 +696,8 @@ var TextAreaInput = React.forwardRef(function (_a, ref) {
|
|
|
696
696
|
});
|
|
697
697
|
TextAreaInput.displayName = 'TextAreaInput';
|
|
698
698
|
|
|
699
|
-
var css_248z$
|
|
700
|
-
styleInject(css_248z$
|
|
699
|
+
var css_248z$6 = ".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";
|
|
700
|
+
styleInject(css_248z$6);
|
|
701
701
|
|
|
702
702
|
var iconMap = {
|
|
703
703
|
info: function () { return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -734,8 +734,8 @@ var Alert = function (_a) {
|
|
|
734
734
|
closeNode));
|
|
735
735
|
};
|
|
736
736
|
|
|
737
|
-
var css_248z$
|
|
738
|
-
styleInject(css_248z$
|
|
737
|
+
var css_248z$5 = ".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";
|
|
738
|
+
styleInject(css_248z$5);
|
|
739
739
|
|
|
740
740
|
var Switch = React.forwardRef(function (_a, ref) {
|
|
741
741
|
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"]);
|
|
@@ -757,8 +757,8 @@ var Switch = React.forwardRef(function (_a, ref) {
|
|
|
757
757
|
});
|
|
758
758
|
Switch.displayName = 'Switch';
|
|
759
759
|
|
|
760
|
-
var css_248z$
|
|
761
|
-
styleInject(css_248z$
|
|
760
|
+
var css_248z$4 = ".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";
|
|
761
|
+
styleInject(css_248z$4);
|
|
762
762
|
|
|
763
763
|
var Tabs = function (_a) {
|
|
764
764
|
var _b, _c;
|
|
@@ -827,8 +827,8 @@ var Tabs = function (_a) {
|
|
|
827
827
|
React.createElement(Spinner, { color: "var(--vchasno-ui-tabs-active-color, #087dc1)" })))));
|
|
828
828
|
};
|
|
829
829
|
|
|
830
|
-
var css_248z$
|
|
831
|
-
styleInject(css_248z$
|
|
830
|
+
var css_248z$3 = ".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";
|
|
831
|
+
styleInject(css_248z$3);
|
|
832
832
|
|
|
833
833
|
var Checkbox = React.forwardRef(function (_a, ref) {
|
|
834
834
|
var className = _a.className, label = _a.label, partial = _a.partial, disabled = _a.disabled, loading = _a.loading, rest = __rest(_a, ["className", "label", "partial", "disabled", "loading"]);
|
|
@@ -846,8 +846,8 @@ var Checkbox = React.forwardRef(function (_a, ref) {
|
|
|
846
846
|
});
|
|
847
847
|
Checkbox.displayName = 'Checkbox';
|
|
848
848
|
|
|
849
|
-
var css_248z$
|
|
850
|
-
styleInject(css_248z$
|
|
849
|
+
var css_248z$2 = ".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";
|
|
850
|
+
styleInject(css_248z$2);
|
|
851
851
|
|
|
852
852
|
var PulseDot = function (_a) {
|
|
853
853
|
var className = _a.className, color = _a.color, style = _a.style, size = _a.size, rest = __rest(_a, ["className", "color", "style", "size"]);
|
|
@@ -856,7 +856,7 @@ var PulseDot = function (_a) {
|
|
|
856
856
|
|
|
857
857
|
var useClientRect = function () {
|
|
858
858
|
var _a = React.useState(null), rect = _a[0], setRect = _a[1];
|
|
859
|
-
var ref = React.useRef(
|
|
859
|
+
var ref = React.useRef();
|
|
860
860
|
React.useLayoutEffect(function () {
|
|
861
861
|
var handleResize = function () {
|
|
862
862
|
if (ref.current) {
|
|
@@ -902,8 +902,8 @@ var composeBubblePath = function (width, height, bubble, radiusOffset) {
|
|
|
902
902
|
].join(' ');
|
|
903
903
|
};
|
|
904
904
|
|
|
905
|
-
var css_248z = ".vchasno-ui-BubbleBox {\n --vchasno-ui-bubble-height: 40px;\n --vchasno-ui-bubble-width: 40px;\n --vchasno-ui-bubble-shadow: 2px 4px 6px rgb(0 0 0 / 20%);\n\n position: relative;\n min-height: calc(var(--vchasno-ui-bubble-height) * 2);\n box-sizing: border-box;\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n overflow: visible;\n pointer-events: none;\n transform: translateZ(0);\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg path {\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg.vchasno-ui-BubbleBox__shadow {\n filter: drop-shadow(var(--vchasno-ui-bubble-shadow));\n}\n\n.vchasno-ui-BubbleBox__bubble {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n display: flex;\n width: var(--vchasno-ui-bubble-width);\n height: var(--vchasno-ui-bubble-height);\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n border-radius: var(--vchasno-ui-bubble-width);\n margin: 0;\n cursor: pointer;\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n";
|
|
906
|
-
styleInject(css_248z);
|
|
905
|
+
var css_248z$1 = ".vchasno-ui-BubbleBox {\n --vchasno-ui-bubble-height: 40px;\n --vchasno-ui-bubble-width: 40px;\n --vchasno-ui-bubble-shadow: 2px 4px 6px rgb(0 0 0 / 20%);\n\n position: relative;\n min-height: calc(var(--vchasno-ui-bubble-height) * 2);\n box-sizing: border-box;\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n overflow: visible;\n pointer-events: none;\n transform: translateZ(0);\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg path {\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-BubbleBox__svg.vchasno-ui-BubbleBox__shadow {\n filter: drop-shadow(var(--vchasno-ui-bubble-shadow));\n}\n\n.vchasno-ui-BubbleBox__bubble {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n display: flex;\n width: var(--vchasno-ui-bubble-width);\n height: var(--vchasno-ui-bubble-height);\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n border-radius: var(--vchasno-ui-bubble-width);\n margin: 0;\n cursor: pointer;\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n";
|
|
906
|
+
styleInject(css_248z$1);
|
|
907
907
|
|
|
908
908
|
var BubbleBox = function (_a) {
|
|
909
909
|
var className = _a.className, controlClassName = _a.controlClassName, svgClassName = _a.svgClassName, control = _a.control, children = _a.children, backgroundColor = _a.backgroundColor, shadow = _a.shadow, _b = _a.bubbleSize, bubbleSize = _b === void 0 ? 40 : _b, borderColor = _a.borderColor, _c = _a.innerOffset, innerOffset = _c === void 0 ? 5 : _c, _d = _a.radiusOffset, radiusOffset = _d === void 0 ? 8 : _d, _e = _a.borderWith, borderWith = _e === void 0 ? 1 : _e, rest = __rest(_a, ["className", "controlClassName", "svgClassName", "control", "children", "backgroundColor", "shadow", "bubbleSize", "borderColor", "innerOffset", "radiusOffset", "borderWith"]);
|
|
@@ -913,13 +913,74 @@ var BubbleBox = function (_a) {
|
|
|
913
913
|
var elementWidth = (rect === null || rect === void 0 ? void 0 : rect.width) || 0;
|
|
914
914
|
var height = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
|
|
915
915
|
var css = __assign({ '--vchasno-ui-bubble-width': "".concat(bubbleWidth, "px"), '--vchasno-ui-bubble-height': "".concat(bubbleHeight, "px") }, rest.style);
|
|
916
|
+
var d = React.useMemo(function () {
|
|
917
|
+
return composeBubblePath(elementWidth, height, Math.max(bubbleHeight, bubbleWidth) + innerOffset * 2, radiusOffset);
|
|
918
|
+
}, [elementWidth, height, bubbleHeight, bubbleWidth, innerOffset, radiusOffset]);
|
|
916
919
|
return (React.createElement("div", __assign({}, rest, { ref: ref, className: cn('vchasno-ui-BubbleBox', className), style: css }),
|
|
917
920
|
rect && (React.createElement("svg", { className: cn('vchasno-ui-BubbleBox__svg', { 'vchasno-ui-BubbleBox__shadow': shadow }, svgClassName), width: elementWidth, height: height, xmlns: "http://www.w3.org/2000/svg" },
|
|
918
|
-
React.createElement("path", { d:
|
|
921
|
+
React.createElement("path", { d: d, fill: backgroundColor || 'transparent', stroke: borderColor || backgroundColor || 'transparent', strokeLinejoin: "round", strokeLinecap: "round", strokeWidth: borderWith }))),
|
|
919
922
|
control && (React.createElement("div", { className: cn('vchasno-ui-BubbleBox__bubble', controlClassName) }, control)),
|
|
920
923
|
children));
|
|
921
924
|
};
|
|
922
925
|
|
|
926
|
+
/**
|
|
927
|
+
* Merges multiple refs into a single ref callback.
|
|
928
|
+
* @see <https://www.jameskerr.blog/posts/react-useref-and-forward-ref/>
|
|
929
|
+
*/
|
|
930
|
+
function mergeRefs() {
|
|
931
|
+
var refs = [];
|
|
932
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
933
|
+
refs[_i] = arguments[_i];
|
|
934
|
+
}
|
|
935
|
+
return function (value) {
|
|
936
|
+
refs.forEach(function (ref) {
|
|
937
|
+
if (typeof ref === 'function') {
|
|
938
|
+
ref(value);
|
|
939
|
+
}
|
|
940
|
+
else if (ref != null) {
|
|
941
|
+
ref.current = value;
|
|
942
|
+
}
|
|
943
|
+
});
|
|
944
|
+
};
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
var composeRoundedBorderPath = function (width, height, radiusOffset) {
|
|
948
|
+
return [
|
|
949
|
+
"M0 ".concat(radiusOffset),
|
|
950
|
+
"L0 ".concat(height - radiusOffset),
|
|
951
|
+
"Q0 ".concat(height, " ").concat(radiusOffset, " ").concat(height),
|
|
952
|
+
"H".concat(width - radiusOffset),
|
|
953
|
+
"Q".concat(width, " ").concat(height, " ").concat(width, " ").concat(height - radiusOffset),
|
|
954
|
+
"V".concat(radiusOffset),
|
|
955
|
+
"Q".concat(width, " 0 ").concat(width - radiusOffset, " 0"),
|
|
956
|
+
"H".concat(radiusOffset),
|
|
957
|
+
"Q0 0 0 ".concat(radiusOffset),
|
|
958
|
+
].join(' ');
|
|
959
|
+
};
|
|
960
|
+
|
|
961
|
+
var css_248z = ".vchasno-ui-SvgBorder {\n --vchasno-ui-svg-border-animation-duration-sec: 1s;\n --vchasno-ui-svg-border-stroke-dashoffset: 100%;\n\n position: relative;\n}\n\n.vchasno-ui-SvgBorder__svg {\n position: absolute;\n z-index: -1;\n top: 0;\n left: 0;\n overflow: visible;\n pointer-events: none;\n transform: translateZ(0);\n transition: var(--vchasno-ui-transition-duration-sec);\n}\n\n.vchasno-ui-SvgBorder__svg--animation-border-offset {\n animation: stroke-offset var(--vchasno-ui-svg-border-animation-duration-sec) linear infinite;\n animation-play-state: paused;\n}\n\n.vchasno-ui-SvgBorder__svg--animation-play {\n animation-play-state: running;\n}\n\n@keyframes stroke-offset {\n to {\n stroke-dashoffset: var(--vchasno-ui-svg-border-stroke-dashoffset);\n }\n}\n";
|
|
962
|
+
styleInject(css_248z);
|
|
963
|
+
|
|
964
|
+
/**
|
|
965
|
+
* @link <https://css-tricks.com/svg-line-animation-works/>
|
|
966
|
+
*/
|
|
967
|
+
var SvgBorder = React.forwardRef(function (_a, forwardedRef) {
|
|
968
|
+
var className = _a.className, svgClassName = _a.svgClassName, _b = _a.strokeDasharray, strokeDasharray = _b === void 0 ? '4' : _b, _c = _a.strokeWidth, strokeWidth = _c === void 0 ? 1 : _c, _d = _a.color, color = _d === void 0 ? 'inherit' : _d, _e = _a.borderRadius, borderRadius = _e === void 0 ? 8 : _e, animation = _a.animation, animationPlay = _a.animationPlay, _f = _a.animationDurationSec, animationDurationSec = _f === void 0 ? 5 : _f, _g = _a.dashoffset, dashoffset = _g === void 0 ? '100%' : _g, children = _a.children, rest = __rest(_a, ["className", "svgClassName", "strokeDasharray", "strokeWidth", "color", "borderRadius", "animation", "animationPlay", "animationDurationSec", "dashoffset", "children"]);
|
|
969
|
+
var _h = useClientRect(), rect = _h.rect, ref = _h.ref;
|
|
970
|
+
var width = (rect === null || rect === void 0 ? void 0 : rect.width) || 0;
|
|
971
|
+
var height = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
|
|
972
|
+
var d = React.useMemo(function () { return composeRoundedBorderPath(width, height, borderRadius); }, [width, height, borderRadius]);
|
|
973
|
+
var css = __assign({ '--vchasno-ui-svg-border-animation-duration-sec': "".concat(animationDurationSec, "s"), '--vchasno-ui-svg-border-stroke-dashoffset': dashoffset }, rest.style);
|
|
974
|
+
return (React.createElement("div", __assign({}, rest, { ref: mergeRefs(ref, forwardedRef), className: cn('vchasno-ui-SvgBorder', className), style: css }),
|
|
975
|
+
React.createElement("svg", { className: cn('vchasno-ui-SvgBorder__svg', {
|
|
976
|
+
'vchasno-ui-SvgBorder__svg--animation-border-offset': animation === 'border-offset',
|
|
977
|
+
'vchasno-ui-SvgBorder__svg--animation-play': animationPlay,
|
|
978
|
+
}, svgClassName), width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg" },
|
|
979
|
+
React.createElement("path", { d: d, strokeLinejoin: "round", strokeLinecap: "round", stroke: color, fill: "transparent", strokeDasharray: strokeDasharray, strokeWidth: strokeWidth })),
|
|
980
|
+
children));
|
|
981
|
+
});
|
|
982
|
+
SvgBorder.displayName = 'SvgBorder';
|
|
983
|
+
|
|
923
984
|
exports.Alert = Alert;
|
|
924
985
|
exports.BubbleBox = BubbleBox;
|
|
925
986
|
exports.Button = Button;
|
|
@@ -932,10 +993,14 @@ exports.Pagination = Pagination;
|
|
|
932
993
|
exports.Paragraph = Paragraph;
|
|
933
994
|
exports.PulseDot = PulseDot;
|
|
934
995
|
exports.Spinner = Spinner;
|
|
996
|
+
exports.SvgBorder = SvgBorder;
|
|
935
997
|
exports.Switch = Switch;
|
|
936
998
|
exports.Tabs = Tabs;
|
|
937
999
|
exports.Text = Text;
|
|
938
1000
|
exports.TextAreaInput = TextAreaInput;
|
|
939
1001
|
exports.TextInput = TextInput;
|
|
940
1002
|
exports.Title = Title;
|
|
1003
|
+
exports.composeBubblePath = composeBubblePath;
|
|
1004
|
+
exports.composeRoundedBorderPath = composeRoundedBorderPath;
|
|
1005
|
+
exports.useClientRect = useClientRect;
|
|
941
1006
|
//# sourceMappingURL=index.js.map
|