@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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { HTMLAttributes } from 'react';
|
|
2
|
+
import { LoadingFeedback, Sizable } from '../types';
|
|
2
3
|
import './Switch.global.css';
|
|
3
|
-
|
|
4
|
-
export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
|
|
4
|
+
export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback>, Partial<Sizable> {
|
|
5
5
|
className?: string;
|
|
6
6
|
label?: string;
|
|
7
7
|
value?: boolean;
|
package/dist/css/_theme.css
CHANGED
|
@@ -61,6 +61,7 @@
|
|
|
61
61
|
--vchasno-ui-pagination-border-color: #6b5fff;
|
|
62
62
|
--vchasno-ui-pagination-hover-bg-color: rgb(0 0 0 / 10%);
|
|
63
63
|
--vchasno-ui-pagination-size: 32px;
|
|
64
|
+
--vchasno-ui-switch-height: 30px;
|
|
64
65
|
--vchasno-ui-switch-color-bg: #b6cadb;
|
|
65
66
|
--vchasno-ui-switch-spinner-color: #b6cadb;
|
|
66
67
|
--vchasno-ui-switch-circle-color: #fff;
|
package/dist/index.d.ts
CHANGED
|
@@ -164,7 +164,7 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
|
|
|
164
164
|
}
|
|
165
165
|
declare const Spinner: React.FC<SpinnerProps>;
|
|
166
166
|
|
|
167
|
-
interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
|
|
167
|
+
interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback>, Partial<Sizable> {
|
|
168
168
|
className?: string;
|
|
169
169
|
label?: string;
|
|
170
170
|
value?: boolean;
|
package/dist/index.js
CHANGED
|
@@ -278,7 +278,7 @@ var LabelText = function (_a) {
|
|
|
278
278
|
React$1.createElement("sup", null, "*")));
|
|
279
279
|
};
|
|
280
280
|
|
|
281
|
-
var css_248z$i = ".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
|
|
281
|
+
var css_248z$i = ".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";
|
|
282
282
|
styleInject(css_248z$i);
|
|
283
283
|
|
|
284
284
|
var Input = function (_a) {
|
|
@@ -605,12 +605,17 @@ var Alert = function (_a) {
|
|
|
605
605
|
closeNode));
|
|
606
606
|
};
|
|
607
607
|
|
|
608
|
-
var css_248z$8 = ".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
|
|
608
|
+
var css_248z$8 = ".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";
|
|
609
609
|
styleInject(css_248z$8);
|
|
610
610
|
|
|
611
|
+
var spinnerSizeMap = {
|
|
612
|
+
sm: 16,
|
|
613
|
+
md: 26,
|
|
614
|
+
lg: 36,
|
|
615
|
+
};
|
|
611
616
|
var Switch = React$1.forwardRef(function (_a, ref) {
|
|
612
|
-
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"]);
|
|
613
|
-
var
|
|
617
|
+
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"]);
|
|
618
|
+
var _d = React$1.useState(defaultChecked), checked = _d[0], setChecked = _d[1];
|
|
614
619
|
var isFullParentControlled = typeof value === 'boolean';
|
|
615
620
|
var inputChecked = isFullParentControlled ? value : checked;
|
|
616
621
|
var handleChange = function (event) {
|
|
@@ -620,10 +625,13 @@ var Switch = React$1.forwardRef(function (_a, ref) {
|
|
|
620
625
|
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
621
626
|
onChecked === null || onChecked === void 0 ? void 0 : onChecked(event.target.checked, event);
|
|
622
627
|
};
|
|
623
|
-
return (React$1.createElement("label", { className: cn('vchasno-ui-switch',
|
|
628
|
+
return (React$1.createElement("label", { className: cn('vchasno-ui-switch', "--".concat(size), {
|
|
629
|
+
'vchasno-ui-switch__active': inputChecked,
|
|
630
|
+
'vchasno-ui-switch__disabled': disabled,
|
|
631
|
+
}, className) },
|
|
624
632
|
React$1.createElement("span", { className: "vchasno-ui-switch--bg" },
|
|
625
633
|
React$1.createElement("input", __assign({}, rest, { ref: ref, disabled: disabled, id: id, type: "checkbox", hidden: true, onChange: handleChange, checked: inputChecked })),
|
|
626
|
-
React$1.createElement("span", { className: "vchasno-ui-switch--circle" }, loading && React$1.createElement(Spinner, { width:
|
|
634
|
+
React$1.createElement("span", { className: "vchasno-ui-switch--circle" }, loading && (React$1.createElement(Spinner, { width: spinnerSizeMap[size], height: spinnerSizeMap[size] })))),
|
|
627
635
|
label && React$1.createElement("span", { className: "vchasno-ui-switch--label" }, label)));
|
|
628
636
|
});
|
|
629
637
|
Switch.displayName = 'Switch';
|