@vchasno/ui-kit 0.2.13 → 0.3.0
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 +7 -0
- package/dist/Datepicker/index.cjs.js +2 -2
- package/dist/Datepicker/index.js +2 -2
- package/dist/Datepicker/types/components/Select/Label.d.ts +7 -0
- package/dist/Datepicker/types/components/Select/customComponents.d.ts +2 -0
- package/dist/Datepicker/types/components/Select/index.d.ts +1 -1
- package/dist/Datepicker/types/components/Select/types.d.ts +4 -0
- package/dist/Select/index.cjs.js +32 -17
- package/dist/Select/index.cjs.js.map +1 -1
- package/dist/Select/index.js +32 -17
- package/dist/Select/index.js.map +1 -1
- package/dist/Select/types/components/Select/Label.d.ts +7 -0
- package/dist/Select/types/components/Select/customComponents.d.ts +2 -0
- package/dist/Select/types/components/Select/index.d.ts +1 -1
- package/dist/Select/types/components/Select/types.d.ts +4 -0
- package/dist/SelectCreatable/index.cjs.js +26 -17
- package/dist/SelectCreatable/index.cjs.js.map +1 -1
- package/dist/SelectCreatable/index.js +26 -17
- package/dist/SelectCreatable/index.js.map +1 -1
- package/dist/SelectCreatable/types/components/Select/Label.d.ts +7 -0
- package/dist/SelectCreatable/types/components/Select/customComponents.d.ts +2 -0
- package/dist/SelectCreatable/types/components/Select/index.d.ts +1 -1
- package/dist/SelectCreatable/types/components/Select/types.d.ts +4 -0
- package/dist/css/_theme.css +3 -1
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/dist/types/components/Select/Label.d.ts +7 -0
- package/dist/types/components/Select/customComponents.d.ts +2 -0
- package/dist/types/components/Select/index.d.ts +1 -1
- package/dist/types/components/Select/types.d.ts +4 -0
- package/package.json +1 -1
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ClearIndicatorProps, DropdownIndicatorProps } from 'react-select';
|
|
3
|
+
import { CustomControlProps } from './types';
|
|
3
4
|
declare const _default: {
|
|
4
5
|
DropdownIndicator: (props: DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
|
|
5
6
|
LoadingIndicator: () => React.JSX.Element;
|
|
6
7
|
IndicatorSeparator: () => null;
|
|
7
8
|
ClearIndicator: (props: ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
|
|
9
|
+
Control: (props: CustomControlProps) => React.JSX.Element;
|
|
8
10
|
};
|
|
9
11
|
export default _default;
|
|
@@ -2,4 +2,4 @@ export { default, SelectComponents } from './Select';
|
|
|
2
2
|
export type { SelectProps } from './Select';
|
|
3
3
|
export { default as SelectCreatable } from './SelectCreatable';
|
|
4
4
|
export type { SelectCreatableProps } from './SelectCreatable';
|
|
5
|
-
export type { Option } from './types';
|
|
5
|
+
export type { Option, CustomControlProps } from './types';
|
package/dist/css/_theme.css
CHANGED
|
@@ -20,8 +20,10 @@
|
|
|
20
20
|
--vchasno-ui-btn-danger-hover-color: #fff;
|
|
21
21
|
--vchasno-ui-input-bg-color: #fff;
|
|
22
22
|
--vchasno-ui-input-bg-color-disabled: #f3f6f8;
|
|
23
|
-
--vchasno-ui-input-border-color-default: #
|
|
23
|
+
--vchasno-ui-input-border-color-default: #dbe5ea;
|
|
24
24
|
--vchasno-ui-input-border-color-focused: #6b5fff;
|
|
25
|
+
--vchasno-ui-input-outline-color-focused: #d9d6f6;
|
|
26
|
+
--vchasno-ui-input-outline-color-error: #ffeaeb;
|
|
25
27
|
--vchasno-ui-input-color-error: #ff5937;
|
|
26
28
|
--vchasno-ui-input-bg-error: rgb(239 101 98 / 10%);
|
|
27
29
|
--vchasno-ui-input-font-size: 14px;
|
package/dist/index.js
CHANGED
|
@@ -205,7 +205,7 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
205
205
|
});
|
|
206
206
|
Button.displayName = "Button";
|
|
207
207
|
|
|
208
|
-
var css_248z$h = ".vchasno-ui-meta {\n display: block;\n max-width: 100%;\n height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint,\n.vchasno-ui-meta__error {\n display: inline-block;\n overflow: hidden;\n max-width: inherit;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-meta__hint {\n color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n color: var(--vchasno-ui-input-color-error);\n}\n";
|
|
208
|
+
var css_248z$h = ".vchasno-ui-meta {\n display: block;\n max-width: 100%;\n height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n padding-left: 16px;\n font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint,\n.vchasno-ui-meta__error {\n display: inline-block;\n overflow: hidden;\n max-width: inherit;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-meta__hint {\n color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n color: var(--vchasno-ui-input-color-error);\n}\n";
|
|
209
209
|
styleInject(css_248z$h);
|
|
210
210
|
|
|
211
211
|
var InputMeta = function (_a) {
|
|
@@ -215,7 +215,7 @@ var InputMeta = function (_a) {
|
|
|
215
215
|
error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
216
216
|
};
|
|
217
217
|
|
|
218
|
-
var css_248z$g = ".vchasno-ui-label-text {\n position:
|
|
218
|
+
var css_248z$g = ".vchasno-ui-label-text {\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 12px;\n display: inline-flex;\n max-width: calc(100% - 20px);\n align-self: flex-start;\n padding: 4px;\n background-color: #fff;\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: color var(--vchasno-ui-transition-duration-sec, 0.3s), top 0.3s, 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\n[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n color: var(--vchasno-ui-input-color-error);\n}\n\n[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\n[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";
|
|
219
219
|
styleInject(css_248z$g);
|
|
220
220
|
|
|
221
221
|
var LabelText = function (_a) {
|
|
@@ -229,7 +229,7 @@ var LabelText = function (_a) {
|
|
|
229
229
|
React.createElement("sup", null, "*")));
|
|
230
230
|
};
|
|
231
231
|
|
|
232
|
-
var css_248z$f = ".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:
|
|
232
|
+
var css_248z$f = ".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 visibility: hidden;\n}\n\n.vchasno-ui-input input:focus::placeholder {\n visibility: visible;\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";
|
|
233
233
|
styleInject(css_248z$f);
|
|
234
234
|
|
|
235
235
|
var Input = function (_a) {
|
|
@@ -240,10 +240,10 @@ var Input = function (_a) {
|
|
|
240
240
|
'--wide': wide,
|
|
241
241
|
'--error': error,
|
|
242
242
|
}, className) }, labelProps),
|
|
243
|
-
React.createElement(LabelText, null, label),
|
|
244
243
|
React.createElement("span", { className: "vchasno-ui-input__wrapper" },
|
|
245
244
|
React.createElement("span", { className: "vchasno-ui-input__wrapper__start-element" }, startElement),
|
|
246
245
|
children,
|
|
246
|
+
React.createElement(LabelText, null, label),
|
|
247
247
|
React.createElement("span", { className: "vchasno-ui-input__feedback" }, loading && React.createElement(Spinner, { height: "100%" })),
|
|
248
248
|
endElement),
|
|
249
249
|
React.createElement(InputMeta, { error: error, hint: hint })));
|
|
@@ -345,7 +345,7 @@ var Pagination = function (_a) {
|
|
|
345
345
|
React.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" })))));
|
|
346
346
|
};
|
|
347
347
|
|
|
348
|
-
var css_248z$c = ".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
|
|
348
|
+
var css_248z$c = ".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";
|
|
349
349
|
styleInject(css_248z$c);
|
|
350
350
|
|
|
351
351
|
var TextInput = React.forwardRef(function (_a, ref) {
|
|
@@ -686,7 +686,7 @@ var index = /* #__PURE__ */React.forwardRef(TextareaAutosize);
|
|
|
686
686
|
|
|
687
687
|
var TextareaAutosize$1 = index;
|
|
688
688
|
|
|
689
|
-
var css_248z$8 = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n height: auto;\n min-height: 40px;\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-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-textarea-input:focus::placeholder {\n
|
|
689
|
+
var css_248z$8 = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n height: auto;\n min-height: 40px;\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-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 visibility: hidden;\n}\n\n.vchasno-ui-textarea-input:focus::placeholder {\n visibility: visible;\n}\n\n.vchasno-ui-input__wrapper__label {\n transform: none;\n}\n\n.vchasno-ui-textarea-input + .vchasno-ui-label-text {\n top: 10px;\n transform: none;\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: -12px;\n}\n";
|
|
690
690
|
styleInject(css_248z$8);
|
|
691
691
|
|
|
692
692
|
var TextAreaInput = React.forwardRef(function (_a, ref) {
|