@vchasno/ui-kit 0.3.31 → 0.3.32

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.
Files changed (15) hide show
  1. package/dist/Select/index.cjs.js +1 -1
  2. package/dist/Select/index.js +1 -1
  3. package/dist/SelectCreatable/index.cjs.js +1 -1
  4. package/dist/SelectCreatable/index.js +1 -1
  5. package/dist/Snackbar/index.cjs.js +4 -4
  6. package/dist/Snackbar/index.cjs.js.map +1 -1
  7. package/dist/Snackbar/index.js +4 -4
  8. package/dist/Snackbar/index.js.map +1 -1
  9. package/dist/css/Input.global.css +8 -0
  10. package/dist/css/MaskInput.global.css +0 -4
  11. package/dist/css/Select.global.css +2 -1
  12. package/dist/css/TextInput.global.css +0 -4
  13. package/dist/index.js +4 -4
  14. package/dist/index.js.map +1 -1
  15. package/package.json +1 -1
package/dist/css/Input.global.css CHANGED
@@ -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
+ }
package/dist/css/MaskInput.global.css CHANGED
@@ -10,7 +10,3 @@
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
- }
package/dist/css/Select.global.css CHANGED
@@ -135,7 +135,8 @@
135
135
  font-weight: 400;
136
136
  }
137
137
 
138
- .vchasno-ui-select:not(:focus-within) .vchasno-ui-select__placeholder {
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
 
package/dist/css/TextInput.global.css CHANGED
@@ -20,7 +20,3 @@
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/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}\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";
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 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-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:not(:focus-within)::placeholder {\n visibility: hidden;\n}\n";
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-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";
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-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:not(:focus-within)::placeholder {\n visibility: hidden;\n}\n";
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-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";
398
398
  styleInject(css_248z$f);
399
399
 
400
400
  var TextInput = React$1.forwardRef(function (_a, ref) {