@vchasno/ui-kit 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.2] - 2024-01-18
+
+## Fixed
+
+- add export SelectOption type from Select, SelectCreatable components
+- fix input styles vchasno-ui-input__wrapper height
+
+- ## [0.2.1] - 2024-01-18
+
+## Fixed
+
+- description css exports in package.json
+
 ## [0.2.0] - 2024-01-18
 
 ## Added

package/README.md

@@ -53,9 +53,9 @@ Suggestions:
 
 ```jsx
 // index.tsx
-import "@vchasno/ui-kit/dist/css/_reset.css"; // optional reset styles
-import "@vchasno/ui-kit/dist/css/_base.css"; // optional base styles
-import "@vchasno/ui-kit/dist/css/_theme.css"; // optional theme variables
+import "@vchasno/ui-kit/reset.css"; // optional reset styles
+import "@vchasno/ui-kit/base.css"; // optional base styles
+import "@vchasno/ui-kit/theme.css"; // optional theme variables
 import "src/styles/_theme-override.css"; // yuor own css file with theme variables override
 ```
 

package/dist/Datepicker/types/components/Select/Select.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Props as ReactSelectProps } from 'react-select';
 import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import { Option } from './types';
 import './Select.global.css';
+export type SelectOption = Option;
 export interface SelectProps extends ReactSelectProps, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
     wide?: boolean;
     dataQa?: string;

package/dist/Datepicker/types/components/Select/SelectCreatable.d.ts

@@ -4,6 +4,7 @@ import type { GroupBase } from 'react-select/dist/declarations/src/types';
 import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
 import { Option } from './types';
 import './Select.global.css';
+export type SelectOption = Option;
 export interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
     wide?: boolean;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;

package/dist/Select/index.d.ts

@@ -18,10 +18,16 @@ interface WithHint {
     hint: string;
 }
 
+interface Option {
+    readonly label: string;
+    readonly value: string;
+}
+
+type SelectOption = Option;
 interface SelectProps extends Props, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
     wide?: boolean;
     dataQa?: string;
 }
 declare const Select: React.FC<SelectProps>;
 
-export { type SelectProps, Select as default };
+export { type SelectOption, type SelectProps, Select as default };

package/dist/Select/types/components/Select/Select.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Props as ReactSelectProps } from 'react-select';
 import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import { Option } from './types';
 import './Select.global.css';
+export type SelectOption = Option;
 export interface SelectProps extends ReactSelectProps, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
     wide?: boolean;
     dataQa?: string;

package/dist/Select/types/components/Select/SelectCreatable.d.ts

@@ -4,6 +4,7 @@ import type { GroupBase } from 'react-select/dist/declarations/src/types';
 import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
 import { Option } from './types';
 import './Select.global.css';
+export type SelectOption = Option;
 export interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
     wide?: boolean;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;

package/dist/SelectCreatable/index.d.ts

@@ -24,6 +24,7 @@ interface Option {
     readonly value: string;
 }
 
+type SelectOption = Option;
 interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
     wide?: boolean;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
@@ -31,4 +32,4 @@ interface SelectCreatableProps extends CreatableProps<Option, false | true, Grou
 }
 declare const SelectCreatable: React.FC<SelectCreatableProps>;
 
-export { type SelectCreatableProps, SelectCreatable as default };
+export { type SelectCreatableProps, type SelectOption, SelectCreatable as default };

package/dist/SelectCreatable/types/components/Select/Select.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Props as ReactSelectProps } from 'react-select';
 import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import { Option } from './types';
 import './Select.global.css';
+export type SelectOption = Option;
 export interface SelectProps extends ReactSelectProps, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
     wide?: boolean;
     dataQa?: string;

package/dist/SelectCreatable/types/components/Select/SelectCreatable.d.ts

@@ -4,6 +4,7 @@ import type { GroupBase } from 'react-select/dist/declarations/src/types';
 import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
 import { Option } from './types';
 import './Select.global.css';
+export type SelectOption = Option;
 export interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
     wide?: boolean;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;

package/dist/index.js

@@ -209,7 +209,7 @@ var LabelText = function (_a) {
         React__default.createElement("sup", null, "*")));
 };
 
-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    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: #fff;\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: #f3f6f8;\n    color: #b6cadb;\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";
+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: #fff;\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: #f3f6f8;\n    color: #b6cadb;\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";
 styleInject(css_248z$b);
 
 var Input = function (_a) {

package/dist/types/components/Select/Select.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Props as ReactSelectProps } from 'react-select';
 import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import { Option } from './types';
 import './Select.global.css';
+export type SelectOption = Option;
 export interface SelectProps extends ReactSelectProps, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
     wide?: boolean;
     dataQa?: string;

package/dist/types/components/Select/SelectCreatable.d.ts

@@ -4,6 +4,7 @@ import type { GroupBase } from 'react-select/dist/declarations/src/types';
 import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
 import { Option } from './types';
 import './Select.global.css';
+export type SelectOption = Option;
 export interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
     wide?: boolean;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vchasno/ui-kit",
-    "version": "0.2.0",
+    "version": "0.2.2",
     "description": "React UI components for Vchasno applications",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -22,7 +22,10 @@
         "./SelectCreatable": {
             "types": "./dist/SelectCreatable/index.d.ts",
             "import": "./dist/SelectCreatable/index.js"
-        }
+        },
+        "./base.css": "./dist/css/_base.css",
+        "./reset.css": "./dist/css/_reset.css",
+        "./theme.css": "./dist/css/_theme.css"
     },
     "types": "dist/index.d.ts",
     "scripts": {