@vchasno/ui-kit 0.3.15 → 0.3.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/Datepicker/index.cjs.js +1 -1
- package/dist/Datepicker/index.js +1 -1
- package/dist/Datepicker/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Datepicker/types/components/Input/Input.d.ts +1 -0
- package/dist/Menu/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Menu/types/components/Input/Input.d.ts +1 -0
- package/dist/ProjectsPopover/types/components/Alert/Alert.d.ts +4 -3
- package/dist/ProjectsPopover/types/components/Input/Input.d.ts +1 -0
- package/dist/Select/index.cjs.js +38 -125
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.js +38 -125
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Select/types/components/Input/Input.d.ts +1 -0
- package/dist/SelectCreatable/index.cjs.js +38 -125
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.js +38 -125
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/Alert/Alert.d.ts +4 -3
- package/dist/SelectCreatable/types/components/Input/Input.d.ts +1 -0
- package/dist/Snackbar/index.cjs.js +8 -8
- package/dist/Snackbar/index.cjs.js.map +1 -1
- package/dist/Snackbar/index.js +8 -8
- package/dist/Snackbar/index.js.map +1 -1
- package/dist/Snackbar/types/components/Alert/Alert.d.ts +4 -3
- package/dist/Snackbar/types/components/Input/Input.d.ts +1 -0
- package/dist/css/_theme.css +9 -7
- package/dist/index.d.ts +5 -3
- package/dist/index.js +22 -26
- package/dist/index.js.map +1 -1
- package/dist/types/components/Alert/Alert.d.ts +4 -3
- package/dist/types/components/Input/Input.d.ts +1 -0
- package/package.json +2 -2
package/dist/Snackbar/index.js
CHANGED
|
@@ -218,7 +218,7 @@ var Spinner = function (_a) {
|
|
|
218
218
|
React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
219
219
|
};
|
|
220
220
|
|
|
221
|
-
var css_248z$n = ".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:
|
|
221
|
+
var css_248z$n = ".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: transparent;\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: transparent;\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";
|
|
222
222
|
styleInject(css_248z$n);
|
|
223
223
|
|
|
224
224
|
var Button = React__default.forwardRef(function (_a, ref) {
|
|
@@ -243,7 +243,7 @@ var InputMeta = function (_a) {
|
|
|
243
243
|
error && React__default.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
244
244
|
};
|
|
245
245
|
|
|
246
|
-
var css_248z$l = ".vchasno-ui-label-text {\n position: absolute;\n z-index:
|
|
246
|
+
var css_248z$l = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 0 4px;\n background-color: var(--vchasno-ui-input-bg-color);\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:\n color var(--vchasno-ui-transition-duration-sec, 0.3s),\n top 0.3s,\n 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,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[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";
|
|
247
247
|
styleInject(css_248z$l);
|
|
248
248
|
|
|
249
249
|
var LabelText = function (_a) {
|
|
@@ -264,7 +264,7 @@ var css_248z$k = ".vchasno-ui-input {\n display: inline-flex;\n max-width:
|
|
|
264
264
|
styleInject(css_248z$k);
|
|
265
265
|
|
|
266
266
|
var Input = function (_a) {
|
|
267
|
-
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;
|
|
267
|
+
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, _b = _a.hideEmptyMeta, hideEmptyMeta = _b === void 0 ? false : _b, children = _a.children;
|
|
268
268
|
return (React__default.createElement("label", __assign({ className: cn('vchasno-ui-input', {
|
|
269
269
|
'--required': required,
|
|
270
270
|
'--disabled': disabled,
|
|
@@ -277,7 +277,7 @@ var Input = function (_a) {
|
|
|
277
277
|
React__default.createElement(LabelText, null, label),
|
|
278
278
|
React__default.createElement("span", { className: "vchasno-ui-input__feedback" }, loading && React__default.createElement(Spinner, { height: "100%" })),
|
|
279
279
|
endElement),
|
|
280
|
-
React__default.createElement(InputMeta, { error: error, hint: hint })));
|
|
280
|
+
hideEmptyMeta && !error && !hint ? null : React__default.createElement(InputMeta, { error: error, hint: hint })));
|
|
281
281
|
};
|
|
282
282
|
Input.displayName = 'Input';
|
|
283
283
|
|
|
@@ -297,9 +297,9 @@ var css_248z$h = ".vchasno-ui-text-input {\n font-size: var(--vchasno-ui-inpu
|
|
|
297
297
|
styleInject(css_248z$h);
|
|
298
298
|
|
|
299
299
|
var TextInput = React__default.forwardRef(function (_a, ref) {
|
|
300
|
-
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
|
|
301
|
-
rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps", "placeholder"]);
|
|
302
|
-
return (React__default.createElement(Input, { required: required, wide: wide, className: className, loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, startElement: startElement, labelProps: labelProps },
|
|
300
|
+
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, hideEmptyMeta = _a.hideEmptyMeta, _b = _a.placeholder, placeholder = _b === void 0 ? ' ' : _b, //need "space" for correct label working
|
|
301
|
+
rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps", "hideEmptyMeta", "placeholder"]);
|
|
302
|
+
return (React__default.createElement(Input, { required: required, wide: wide, className: className, loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, startElement: startElement, labelProps: labelProps, hideEmptyMeta: hideEmptyMeta },
|
|
303
303
|
React__default.createElement("input", __assign({ disabled: disabled, className: cn('vchasno-ui-text-input', inputClassName), required: required, ref: ref, placeholder: placeholder }, rest))));
|
|
304
304
|
});
|
|
305
305
|
TextInput.displayName = 'TextInput';
|
|
@@ -461,7 +461,7 @@ var TextAreaInput = React__default.forwardRef(function (_a, ref) {
|
|
|
461
461
|
});
|
|
462
462
|
TextAreaInput.displayName = 'TextAreaInput';
|
|
463
463
|
|
|
464
|
-
var css_248z$b = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding:
|
|
464
|
+
var css_248z$b = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 12px 16px;\n border-radius: 4px;\n border-left: 3px solid transparent;\n font-size: 14px;\n gap: 12px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert strong,\n.vchasno-ui-alert b {\n font-weight: 700;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 4px;\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 font-size: 20px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #006be9);\n background-color: var(--vchasno-ui-alert-info-bg, #ecf4ff);\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, #fff2d6);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #e73434);\n background-color: var(--vchasno-ui-alert-error-bg, #ffeded);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #00b700);\n background-color: var(--vchasno-ui-alert-success-bg, #e7f3d9);\n}\n\n.vchasno-ui-alert.--config {\n border-color: var(--vchasno-ui-alert-config-color, #006be9);\n background-color: var(--vchasno-ui-alert-config-bg, #f3f6f8);\n}\n\n.vchasno-ui-alert__close-icon {\n width: 30px;\n height: 30px;\n border-radius: 4px;\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(255 255 255 / 50%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
|
|
465
465
|
styleInject(css_248z$b);
|
|
466
466
|
|
|
467
467
|
var css_248z$a = ".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";
|