@vchasno/ui-kit 0.2.3 → 0.2.5
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 +13 -0
- package/README.md +3 -3
- package/dist/css/_theme.css +3 -0
- package/dist/index.js +2 -2
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.2.5] - 2024-02-08
|
|
11
|
+
|
|
12
|
+
## Fixed
|
|
13
|
+
|
|
14
|
+
- replace css variables with hardcoded for text input bg, disable colors
|
|
15
|
+
- fix textarea font-size, color css props, apply common vars
|
|
16
|
+
|
|
17
|
+
## [0.2.4] - 2024-01-19
|
|
18
|
+
|
|
19
|
+
## Fixed
|
|
20
|
+
|
|
21
|
+
- fix import css warnings, remove type module to allow use moduleResolution: "Node16"/"Bundler"
|
|
22
|
+
|
|
10
23
|
## [0.2.3] - 2024-01-18
|
|
11
24
|
|
|
12
25
|
## Fixed
|
package/README.md
CHANGED
|
@@ -53,9 +53,9 @@ Suggestions:
|
|
|
53
53
|
|
|
54
54
|
```jsx
|
|
55
55
|
// index.tsx
|
|
56
|
-
import "@vchasno/ui-kit/
|
|
57
|
-
import "@vchasno/ui-kit/
|
|
58
|
-
import "@vchasno/ui-kit/
|
|
56
|
+
import "@vchasno/ui-kit/dist/css/_reset.css"; // optional reset styles
|
|
57
|
+
import "@vchasno/ui-kit/dist/css/_base.css"; // optional base styles
|
|
58
|
+
import "@vchasno/ui-kit/dist/css/_theme.css"; // optional theme variables
|
|
59
59
|
import "src/styles/_theme-override.css"; // yuor own css file with theme variables override
|
|
60
60
|
```
|
|
61
61
|
|
package/dist/css/_theme.css
CHANGED
|
@@ -18,12 +18,15 @@
|
|
|
18
18
|
--vchasno-ui-btn-danger-bg: rgb(239 101 98 / 20%);
|
|
19
19
|
--vchasno-ui-btn-danger-hover-bg: #ef6562;
|
|
20
20
|
--vchasno-ui-btn-danger-hover-color: #fff;
|
|
21
|
+
--vchasno-ui-input-bg-color: #fff;
|
|
22
|
+
--vchasno-ui-input-bg-color-disabled: #f3f6f8;
|
|
21
23
|
--vchasno-ui-input-border-color-default: #b6cadb;
|
|
22
24
|
--vchasno-ui-input-border-color-focused: #6b5fff;
|
|
23
25
|
--vchasno-ui-input-color-error: #ff5937;
|
|
24
26
|
--vchasno-ui-input-bg-error: rgb(239 101 98 / 10%);
|
|
25
27
|
--vchasno-ui-input-font-size: 14px;
|
|
26
28
|
--vchasno-ui-input-font-color: #333;
|
|
29
|
+
--vchasno-ui-input-font-color-disabled: #b6cadb;
|
|
27
30
|
--vchasno-ui-label-color-default: #6b8091;
|
|
28
31
|
--vchasno-ui-label-color-focused: #6b5fff;
|
|
29
32
|
--vchasno-ui-checkbox-bg-color: #604adf;
|
package/dist/index.js
CHANGED
|
@@ -209,7 +209,7 @@ var LabelText = function (_a) {
|
|
|
209
209
|
React__default.createElement("sup", null, "*")));
|
|
210
210
|
};
|
|
211
211
|
|
|
212
|
-
var css_248z$b = ".vchasno-ui-input {\n display: inline-flex;\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: 40px;\n box-sizing: border-box;\n align-items: center;\n padding-right: 33px;\n padding-left: 10px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 4px;\n background-color:
|
|
212
|
+
var css_248z$b = ".vchasno-ui-input {\n display: inline-flex;\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: 40px;\n box-sizing: border-box;\n align-items: center;\n padding-right: 33px;\n padding-left: 10px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 4px;\n background-color: var(--vchasno-ui-input-bg-color);\n gap: 5px;\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}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-color-error);\n background-color: var(--vchasno-ui-input-bg-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
213
213
|
styleInject(css_248z$b);
|
|
214
214
|
|
|
215
215
|
var Input = function (_a) {
|
|
@@ -663,7 +663,7 @@ var index = /* #__PURE__ */forwardRef(TextareaAutosize);
|
|
|
663
663
|
|
|
664
664
|
var TextareaAutosize$1 = index;
|
|
665
665
|
|
|
666
|
-
var css_248z$4 = ".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 font-size:
|
|
666
|
+
var css_248z$4 = ".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 color: transparent;\n}\n";
|
|
667
667
|
styleInject(css_248z$4);
|
|
668
668
|
|
|
669
669
|
var TextAreaInput = React__default.forwardRef(function (_a, ref) {
|
package/package.json
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vchasno/ui-kit",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.5",
|
|
4
4
|
"description": "React UI components for Vchasno applications",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
7
|
-
"type": "module",
|
|
8
7
|
"files": [
|
|
9
|
-
"dist
|
|
8
|
+
"dist",
|
|
10
9
|
"README.md",
|
|
11
10
|
"CHANGELOG.md"
|
|
12
11
|
],
|
|
13
12
|
"exports": {
|
|
14
|
-
".":
|
|
13
|
+
".": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"import": "./dist/index.js"
|
|
16
|
+
},
|
|
15
17
|
"./Datepicker": {
|
|
16
18
|
"types": "./dist/Datepicker/index.d.ts",
|
|
17
19
|
"import": "./dist/Datepicker/index.js"
|
|
@@ -24,9 +26,7 @@
|
|
|
24
26
|
"types": "./dist/SelectCreatable/index.d.ts",
|
|
25
27
|
"import": "./dist/SelectCreatable/index.js"
|
|
26
28
|
},
|
|
27
|
-
"./
|
|
28
|
-
"./reset.css": "./dist/css/_reset.css",
|
|
29
|
-
"./theme.css": "./dist/css/_theme.css"
|
|
29
|
+
"./dist/css/*.css": "./dist/css/*.css"
|
|
30
30
|
},
|
|
31
31
|
"types": "dist/index.d.ts",
|
|
32
32
|
"scripts": {
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"pub": "npm run build && npm publish --access public --scope=@vchasno",
|
|
39
39
|
"storybook": "storybook dev -p 6006",
|
|
40
40
|
"build-storybook": "storybook build",
|
|
41
|
-
"test": "jest --ci --coverage",
|
|
41
|
+
"test": "jest --ci --coverage --collectCoverageFrom=src/components/**/*.{ts,tsx}",
|
|
42
42
|
"generate-component": "node scripts/generate-component.js"
|
|
43
43
|
},
|
|
44
44
|
"keywords": [
|