@vchasno/ui-kit 0.3.19 → 0.3.20
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 +6 -0
- package/dist/Datepicker/types/components/Switch/Switch.d.ts +2 -2
- package/dist/Menu/types/components/Switch/Switch.d.ts +2 -2
- package/dist/ProjectsPopover/types/components/Switch/Switch.d.ts +2 -2
- package/dist/Select/index.cjs.js +3 -3
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.js +3 -3
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/Switch/Switch.d.ts +2 -2
- package/dist/SelectCreatable/index.cjs.js +1 -1
- package/dist/SelectCreatable/index.js +1 -1
- package/dist/SelectCreatable/types/components/Switch/Switch.d.ts +2 -2
- package/dist/Snackbar/index.cjs.js +14 -6
- package/dist/Snackbar/index.cjs.js.map +1 -1
- package/dist/Snackbar/index.js +14 -6
- package/dist/Snackbar/index.js.map +1 -1
- package/dist/Snackbar/types/components/Switch/Switch.d.ts +2 -2
- package/dist/css/_theme.css +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +14 -6
- package/dist/index.js.map +1 -1
- package/dist/types/components/Switch/Switch.d.ts +2 -2
- package/package.json +1 -1
package/dist/Snackbar/index.js
CHANGED
|
@@ -260,7 +260,7 @@ var LabelText = function (_a) {
|
|
|
260
260
|
React__default.createElement("sup", null, "*")));
|
|
261
261
|
};
|
|
262
262
|
|
|
263
|
-
var css_248z$k = ".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
|
|
263
|
+
var css_248z$k = ".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: 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";
|
|
264
264
|
styleInject(css_248z$k);
|
|
265
265
|
|
|
266
266
|
var Input = function (_a) {
|
|
@@ -464,12 +464,17 @@ TextAreaInput.displayName = 'TextAreaInput';
|
|
|
464
464
|
var css_248z$b = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n flex-shrink: 0;\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
|
-
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
|
|
467
|
+
var css_248z$a = ".vchasno-ui-switch {\n --vchasno-ui-switc-hcircle-size: calc(var(--vchasno-ui-switch-height) - 4px);\n\n display: inline-flex;\n align-content: center;\n cursor: pointer;\n line-height: var(--vchasno-ui-switch-height);\n}\n\n.vchasno-ui-switch.--sm {\n --vchasno-ui-switch-height: 20px;\n}\n\n.vchasno-ui-switch.--md {\n --vchasno-ui-switch-height: 30px;\n}\n\n.vchasno-ui-switch.--lg {\n --vchasno-ui-switch-height: 40px;\n}\n\n.vchasno-ui-switch--bg {\n position: relative;\n z-index: 0;\n display: inline-flex;\n height: var(--vchasno-ui-switch-height, 20px);\n box-sizing: border-box;\n flex-shrink: 0;\n border-radius: 100px;\n aspect-ratio: 36/20;\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 height: var(--vchasno-ui-switc-hcircle-size);\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n aspect-ratio: 1/1;\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-switch.--md .vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n transform: translate(26px, 2px);\n}\n\n.vchasno-ui-switch.--lg .vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n transform: translate(34px, 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 user-select: none;\n}\n";
|
|
468
468
|
styleInject(css_248z$a);
|
|
469
469
|
|
|
470
|
+
var spinnerSizeMap = {
|
|
471
|
+
sm: 16,
|
|
472
|
+
md: 26,
|
|
473
|
+
lg: 36,
|
|
474
|
+
};
|
|
470
475
|
var Switch = React__default.forwardRef(function (_a, ref) {
|
|
471
|
-
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"]);
|
|
472
|
-
var
|
|
476
|
+
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, _c = _a.size, size = _c === void 0 ? 'md' : _c, rest = __rest(_a, ["className", "label", "onChange", "onChecked", "value", "defaultChecked", "disabled", "loading", "id", "size"]);
|
|
477
|
+
var _d = useState(defaultChecked), checked = _d[0], setChecked = _d[1];
|
|
473
478
|
var isFullParentControlled = typeof value === 'boolean';
|
|
474
479
|
var inputChecked = isFullParentControlled ? value : checked;
|
|
475
480
|
var handleChange = function (event) {
|
|
@@ -479,10 +484,13 @@ var Switch = React__default.forwardRef(function (_a, ref) {
|
|
|
479
484
|
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
480
485
|
onChecked === null || onChecked === void 0 ? void 0 : onChecked(event.target.checked, event);
|
|
481
486
|
};
|
|
482
|
-
return (React__default.createElement("label", { className: cn('vchasno-ui-switch',
|
|
487
|
+
return (React__default.createElement("label", { className: cn('vchasno-ui-switch', "--".concat(size), {
|
|
488
|
+
'vchasno-ui-switch__active': inputChecked,
|
|
489
|
+
'vchasno-ui-switch__disabled': disabled,
|
|
490
|
+
}, className) },
|
|
483
491
|
React__default.createElement("span", { className: "vchasno-ui-switch--bg" },
|
|
484
492
|
React__default.createElement("input", __assign({}, rest, { ref: ref, disabled: disabled, id: id, type: "checkbox", hidden: true, onChange: handleChange, checked: inputChecked })),
|
|
485
|
-
React__default.createElement("span", { className: "vchasno-ui-switch--circle" }, loading && React__default.createElement(Spinner, { width:
|
|
493
|
+
React__default.createElement("span", { className: "vchasno-ui-switch--circle" }, loading && (React__default.createElement(Spinner, { width: spinnerSizeMap[size], height: spinnerSizeMap[size] })))),
|
|
486
494
|
label && React__default.createElement("span", { className: "vchasno-ui-switch--label" }, label)));
|
|
487
495
|
});
|
|
488
496
|
Switch.displayName = 'Switch';
|