@vchasno/ui-kit 0.3.19 → 0.3.21

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 (30) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/Datepicker/types/components/Button/Button.d.ts +1 -1
  3. package/dist/Datepicker/types/components/Switch/Switch.d.ts +2 -2
  4. package/dist/Menu/types/components/Button/Button.d.ts +1 -1
  5. package/dist/Menu/types/components/Switch/Switch.d.ts +2 -2
  6. package/dist/ProjectsPopover/types/components/Button/Button.d.ts +1 -1
  7. package/dist/ProjectsPopover/types/components/Switch/Switch.d.ts +2 -2
  8. package/dist/Select/index.cjs.js +3 -3
  9. package/dist/Select/index.cjs.js.map +1 -1
  10. package/dist/Select/index.js +3 -3
  11. package/dist/Select/index.js.map +1 -1
  12. package/dist/Select/types/components/Button/Button.d.ts +1 -1
  13. package/dist/Select/types/components/Switch/Switch.d.ts +2 -2
  14. package/dist/SelectCreatable/index.cjs.js +1 -1
  15. package/dist/SelectCreatable/index.js +1 -1
  16. package/dist/SelectCreatable/types/components/Button/Button.d.ts +1 -1
  17. package/dist/SelectCreatable/types/components/Switch/Switch.d.ts +2 -2
  18. package/dist/Snackbar/index.cjs.js +15 -7
  19. package/dist/Snackbar/index.cjs.js.map +1 -1
  20. package/dist/Snackbar/index.js +15 -7
  21. package/dist/Snackbar/index.js.map +1 -1
  22. package/dist/Snackbar/types/components/Button/Button.d.ts +1 -1
  23. package/dist/Snackbar/types/components/Switch/Switch.d.ts +2 -2
  24. package/dist/css/_theme.css +3 -0
  25. package/dist/index.d.ts +2 -2
  26. package/dist/index.js +15 -7
  27. package/dist/index.js.map +1 -1
  28. package/dist/types/components/Button/Button.d.ts +1 -1
  29. package/dist/types/components/Switch/Switch.d.ts +2 -2
  30. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [0.3.21] - 2024-08-14
11
+
12
+ ## Added
13
+
14
+ - Button - theme pink
15
+
16
+ ## [0.3.20] - 2024-08-13
17
+
18
+ ## Added
19
+
20
+ - Switch - redesign component, add size prop
21
+
10
22
  ## [0.3.17] - 2024-08-12
11
23
 
12
24
  ## Added
package/dist/Datepicker/types/components/Button/Button.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { ButtonHTMLAttributes } from 'react';
2
2
  import { LoadingFeedback, Sizable } from '../types';
3
3
  import './Button.global.css';
4
- type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
4
+ type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
5
5
  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
6
6
  className?: string;
7
7
  theme?: ButtonTheme;
package/dist/Datepicker/types/components/Switch/Switch.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { HTMLAttributes } from 'react';
2
+ import { LoadingFeedback, Sizable } from '../types';
2
3
  import './Switch.global.css';
3
- import { LoadingFeedback } from '../types';
4
- export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
4
+ export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback>, Partial<Sizable> {
5
5
  className?: string;
6
6
  label?: string;
7
7
  value?: boolean;
package/dist/Menu/types/components/Button/Button.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { ButtonHTMLAttributes } from 'react';
2
2
  import { LoadingFeedback, Sizable } from '../types';
3
3
  import './Button.global.css';
4
- type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
4
+ type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
5
5
  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
6
6
  className?: string;
7
7
  theme?: ButtonTheme;
package/dist/Menu/types/components/Switch/Switch.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { HTMLAttributes } from 'react';
2
+ import { LoadingFeedback, Sizable } from '../types';
2
3
  import './Switch.global.css';
3
- import { LoadingFeedback } from '../types';
4
- export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
4
+ export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback>, Partial<Sizable> {
5
5
  className?: string;
6
6
  label?: string;
7
7
  value?: boolean;
package/dist/ProjectsPopover/types/components/Button/Button.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { ButtonHTMLAttributes } from 'react';
2
2
  import { LoadingFeedback, Sizable } from '../types';
3
3
  import './Button.global.css';
4
- type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
4
+ type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
5
5
  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
6
6
  className?: string;
7
7
  theme?: ButtonTheme;
package/dist/ProjectsPopover/types/components/Switch/Switch.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { HTMLAttributes } from 'react';
2
+ import { LoadingFeedback, Sizable } from '../types';
2
3
  import './Switch.global.css';
3
- import { LoadingFeedback } from '../types';
4
- export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
4
+ export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback>, Partial<Sizable> {
5
5
  className?: string;
6
6
  label?: string;
7
7
  value?: boolean;
package/dist/Select/index.cjs.js CHANGED
@@ -7770,20 +7770,20 @@ var noOptionsMessageDefault = function () { return React.createElement("span", n
7770
7770
  var loadingMessageDefault = function () { return React.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
7771
7771
  var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
7772
7772
 
7773
- var css_248z = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 50px;\n border-color: var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n z-index: 100;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n margin-top: 4px;\n margin-bottom: 6px;\n box-shadow: none;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n border: 1px solid #ff5937;\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n border-color: #ff5937;\n}\n\n.vchasno-ui-select\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n .vchasno-ui-select__control:hover\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n border-color: var(--vchasno-ui-input-border-color-focused);\n box-shadow: none;\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n padding: 3px;\n border-radius: 3px;\n color: var(--vchasno-ui-input-font-color);\n outline: 3px solid transparent;\n transition:\n outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n padding-right: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__value-container {\n padding: 10px 14px;\n}\n";
7773
+ var css_248z = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 50px;\n border-color: var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n z-index: 100;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 8px;\n margin-top: 4px;\n margin-bottom: 6px;\n box-shadow: none;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n border: 1px solid #ff5937;\n outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n border-color: #ff5937;\n}\n\n.vchasno-ui-select\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n .vchasno-ui-select__control:hover\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n border-color: var(--vchasno-ui-input-border-color-focused);\n box-shadow: none;\n outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n padding: 3px;\n border-radius: 3px;\n color: var(--vchasno-ui-input-font-color);\n outline: 3px solid transparent;\n transition:\n outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n padding-right: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__value-container {\n padding: 5px 14px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__label {\n padding: 6px;\n font-size: 14px;\n}\n\n.vchasno-ui-select .vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n padding: 6px;\n font-size: 14px;\n}\n";
7774
7774
  styleInject(css_248z);
7775
7775
 
7776
7776
  var Select = function (_a) {
7777
7777
  var className = _a.className, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, isDisabled = _a.isDisabled, _b = _a.menuPlacement, menuPlacement = _b === void 0 ? 'auto' : _b, _c = _a.noOptionsMessage, noOptionsMessage = _c === void 0 ? defaultProps.noOptionsMessageDefault : _c, _d = _a.loadingMessage, loadingMessage = _d === void 0 ? defaultProps.loadingMessageDefault : _d, _e = _a.placeholder, placeholder = _e === void 0 ? ' ' : _e, //need "space" for correct label working
7778
7778
  _f = _a.components, //need "space" for correct label working
7779
- components = _f === void 0 ? {} : _f, _g = _a.error, error = _g === void 0 ? '' : _g, dataQa = _a.dataQa, rest = __rest(_a, ["className", "label", "hint", "wide", "required", "loading", "isDisabled", "menuPlacement", "noOptionsMessage", "loadingMessage", "placeholder", "components", "error", "dataQa"]);
7779
+ components = _f === void 0 ? {} : _f, _g = _a.error, error = _g === void 0 ? '' : _g, dataQa = _a.dataQa, _h = _a.closeMenuOnSelect, closeMenuOnSelect = _h === void 0 ? true : _h, rest = __rest(_a, ["className", "label", "hint", "wide", "required", "loading", "isDisabled", "menuPlacement", "noOptionsMessage", "loadingMessage", "placeholder", "components", "error", "dataQa", "closeMenuOnSelect"]);
7780
7780
  return (React.createElement("label", { "data-qa": dataQa, className: cn('vchasno-ui-select', {
7781
7781
  '--required': required,
7782
7782
  '--disabled': isDisabled,
7783
7783
  '--wide': wide,
7784
7784
  '--error': error,
7785
7785
  }, className) },
7786
- React.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign(__assign({}, CustomComponents), { Control: function (props) { return React.createElement(CustomComponents.Control, __assign({}, props, { label: label })); } }), components), classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest, { styles: {
7786
+ React.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign(__assign({}, CustomComponents), { Control: function (props) { return React.createElement(CustomComponents.Control, __assign({}, props, { label: label })); } }), components), closeMenuOnSelect: closeMenuOnSelect, classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest, { styles: {
7787
7787
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
7788
7788
  control: function (_a) {
7789
7789
  _a.outline; var provided = __rest(_a, ["outline"]);