@vchasno/ui-kit 0.3.31 → 0.3.33
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/Select/index.cjs.js +1 -1
- package/dist/Select/index.js +1 -1
- package/dist/SelectCreatable/index.cjs.js +1 -1
- package/dist/SelectCreatable/index.js +1 -1
- package/dist/Snackbar/index.cjs.js +5 -5
- package/dist/Snackbar/index.cjs.js.map +1 -1
- package/dist/Snackbar/index.js +5 -5
- package/dist/Snackbar/index.js.map +1 -1
- package/dist/css/Input.global.css +9 -1
- package/dist/css/MaskInput.global.css +1 -5
- package/dist/css/Select.global.css +3 -2
- package/dist/css/TextAreaInput.global.css +1 -1
- package/dist/css/TextInput.global.css +1 -5
- package/dist/css/_theme.css +1 -0
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
.vchasno-ui-input input::placeholder {
|
|
9
|
-
color: var(--vchasno-ui-input-
|
|
9
|
+
color: var(--vchasno-ui-input-placeholder-color);
|
|
10
10
|
font-size: var(--vchasno-ui-input-font-size);
|
|
11
11
|
line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);
|
|
12
12
|
transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
|
|
@@ -88,3 +88,11 @@
|
|
|
88
88
|
cursor: not-allowed;
|
|
89
89
|
opacity: 0.8;
|
|
90
90
|
}
|
|
91
|
+
|
|
92
|
+
.vchasno-ui-input:has(.vchasno-ui-label-text) input::placeholder {
|
|
93
|
+
visibility: hidden;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.vchasno-ui-input:focus-within:has(.vchasno-ui-label-text) input::placeholder {
|
|
97
|
+
visibility: visible;
|
|
98
|
+
}
|
|
@@ -5,12 +5,8 @@
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.vchasno-ui-mask-input::placeholder {
|
|
8
|
-
color: var(--vchasno-ui-input-
|
|
8
|
+
color: var(--vchasno-ui-input-placeholder-color);
|
|
9
9
|
font-size: var(--vchasno-ui-input-font-size);
|
|
10
10
|
line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);
|
|
11
11
|
transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
|
|
12
12
|
}
|
|
13
|
-
|
|
14
|
-
.vchasno-ui-mask-input:not(:focus-within)::placeholder {
|
|
15
|
-
visibility: hidden;
|
|
16
|
-
}
|
|
@@ -130,12 +130,13 @@
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
.vchasno-ui-select .vchasno-ui-select__placeholder {
|
|
133
|
-
color: var(--vchasno-ui-input-
|
|
133
|
+
color: var(--vchasno-ui-input-placeholder-color);
|
|
134
134
|
font-size: var(--vchasno-ui-input-font-size);
|
|
135
135
|
font-weight: 400;
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
-
.vchasno-ui-select:not(:focus-within
|
|
138
|
+
.vchasno-ui-select:not(:focus-within, :not(:has(.vchasno-ui-label-text)))
|
|
139
|
+
.vchasno-ui-select__placeholder {
|
|
139
140
|
visibility: hidden;
|
|
140
141
|
}
|
|
141
142
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.vchasno-ui-textarea-input::placeholder {
|
|
17
|
-
color: var(--vchasno-ui-input-
|
|
17
|
+
color: var(--vchasno-ui-input-placeholder-color);
|
|
18
18
|
font-size: var(--vchasno-ui-input-font-size);
|
|
19
19
|
line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);
|
|
20
20
|
transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
|
|
@@ -15,12 +15,8 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.vchasno-ui-text-input::placeholder {
|
|
18
|
-
color: var(--vchasno-ui-input-
|
|
18
|
+
color: var(--vchasno-ui-input-placeholder-color);
|
|
19
19
|
font-size: var(--vchasno-ui-input-font-size);
|
|
20
20
|
line-height: var(--vchasno-ui-input-font-size);
|
|
21
21
|
transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
|
|
22
22
|
}
|
|
23
|
-
|
|
24
|
-
.vchasno-ui-text-input:not(:focus-within)::placeholder {
|
|
25
|
-
visibility: hidden;
|
|
26
|
-
}
|
package/dist/css/_theme.css
CHANGED
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
--vchasno-ui-input-bg-error: rgb(239 101 98 / 10%);
|
|
35
35
|
--vchasno-ui-input-font-size: 14px;
|
|
36
36
|
--vchasno-ui-input-font-color: #333;
|
|
37
|
+
--vchasno-ui-input-placeholder-color: #6b8091;
|
|
37
38
|
--vchasno-ui-input-font-color-disabled: #b6cadb;
|
|
38
39
|
--vchasno-ui-label-color-default: #6b8091;
|
|
39
40
|
--vchasno-ui-label-color-focused: #6b5fff;
|
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-
|
|
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-placeholder-color);\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 min-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 margin-right: 5px;\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\n.vchasno-ui-input:has(.vchasno-ui-label-text) input::placeholder {\n visibility: hidden;\n}\n\n.vchasno-ui-input:focus-within:has(.vchasno-ui-label-text) input::placeholder {\n visibility: visible;\n}\n";
|
|
282
282
|
styleInject(css_248z$i);
|
|
283
283
|
|
|
284
284
|
var Input = function (_a) {
|
|
@@ -292,7 +292,7 @@ var Input = function (_a) {
|
|
|
292
292
|
React$1.createElement("span", { className: "vchasno-ui-input__wrapper" },
|
|
293
293
|
startElement && (React$1.createElement("span", { className: "vchasno-ui-input__wrapper__start-element" }, startElement)),
|
|
294
294
|
children,
|
|
295
|
-
React$1.createElement(LabelText, null, label),
|
|
295
|
+
label && React$1.createElement(LabelText, null, label),
|
|
296
296
|
React$1.createElement("span", { className: "vchasno-ui-input__feedback" }, loading && React$1.createElement(Spinner, { height: "100%" })),
|
|
297
297
|
endElement),
|
|
298
298
|
hideEmptyMeta && !error && !hint ? null : React$1.createElement(InputMeta, { error: error, hint: hint })));
|
|
@@ -308,7 +308,7 @@ var reactTextMask = {exports: {}};
|
|
|
308
308
|
var reactTextMaskExports = reactTextMask.exports;
|
|
309
309
|
var MaskedInput = /*@__PURE__*/getDefaultExportFromCjs(reactTextMaskExports);
|
|
310
310
|
|
|
311
|
-
var css_248z$h = ".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-
|
|
311
|
+
var css_248z$h = ".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-placeholder-color);\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";
|
|
312
312
|
styleInject(css_248z$h);
|
|
313
313
|
|
|
314
314
|
var MaskInput = function (_a) {
|
|
@@ -394,7 +394,7 @@ var Pagination = function (_a) {
|
|
|
394
394
|
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" })))));
|
|
395
395
|
};
|
|
396
396
|
|
|
397
|
-
var css_248z$f = ".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-
|
|
397
|
+
var css_248z$f = ".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-placeholder-color);\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";
|
|
398
398
|
styleInject(css_248z$f);
|
|
399
399
|
|
|
400
400
|
var TextInput = React$1.forwardRef(function (_a, ref) {
|
|
@@ -2868,7 +2868,7 @@ process.env.NODE_ENV !== "production" ? TextareaAutosize.propTypes /* remove-pro
|
|
|
2868
2868
|
value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string])
|
|
2869
2869
|
} : void 0;
|
|
2870
2870
|
|
|
2871
|
-
var css_248z$a = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n height: auto;\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-
|
|
2871
|
+
var css_248z$a = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n height: auto;\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-placeholder-color);\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__wrapper__label {\n transform: none;\n}\n\n.vchasno-ui-textarea-input + .vchasno-ui-label-text {\n top: 0;\n transform: translateY(10px);\n transition:\n transform var(--vchasno-ui-transition-duration-sec, 0.3s),\n font-size var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-textarea-input:not(:placeholder-shown) + .vchasno-ui-label-text,\n.vchasno-ui-textarea-input:focus:not(.--disabled) + .vchasno-ui-label-text {\n top: 0;\n transform: translateY(-12px);\n}\n";
|
|
2872
2872
|
styleInject(css_248z$a);
|
|
2873
2873
|
|
|
2874
2874
|
var TextAreaInput = React$1.forwardRef(function (_a, ref) {
|