colibri-ui 0.7.53 → 0.7.55

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 (33) hide show
  1. package/Checkbox/Checkbox.module.css +2 -2
  2. package/DotsLoader/DotsLoader.module.css +10 -10
  3. package/Grid/Item/Grid-Item.module.css +1 -1
  4. package/Grid/index.js +1 -1
  5. package/InputRadio/InputRadio.module.css +97 -0
  6. package/InputRadio/index.d.ts +23 -0
  7. package/InputRadio/package.json +6 -0
  8. package/RadioGroup/Radio.d.ts +19 -0
  9. package/RadioGroup/RadioGroup.module.css +30 -0
  10. package/RadioGroup/index.d.ts +26 -0
  11. package/RadioGroup/package.json +6 -0
  12. package/Theme/global.css +3 -0
  13. package/Theme/index.d.ts +5 -0
  14. package/Theme/themes/default.d.ts +5 -0
  15. package/Theme/themes/default.js +5 -0
  16. package/Typography/index.props.d.ts +1 -1
  17. package/esm/Checkbox/Checkbox.module.css +2 -2
  18. package/esm/DotsLoader/DotsLoader.module.css +10 -10
  19. package/esm/Grid/Item/Grid-Item.module.css +1 -1
  20. package/esm/Grid/index.js +1 -1
  21. package/esm/InputRadio/InputRadio.module.css +97 -0
  22. package/esm/InputRadio/index.d.ts +23 -0
  23. package/esm/RadioGroup/Radio.d.ts +19 -0
  24. package/esm/RadioGroup/RadioGroup.module.css +30 -0
  25. package/esm/RadioGroup/index.d.ts +26 -0
  26. package/esm/Theme/global.css +3 -0
  27. package/esm/Theme/index.d.ts +5 -0
  28. package/esm/Theme/themes/default.d.ts +5 -0
  29. package/esm/Theme/themes/default.js +5 -0
  30. package/esm/Typography/index.props.d.ts +1 -1
  31. package/esm/theme_default_variables.css +5 -0
  32. package/package.json +1 -2
  33. package/theme_default_variables.css +5 -0
package/Checkbox/Checkbox.module.css CHANGED
@@ -53,8 +53,8 @@
53
53
  }
54
54
 
55
55
  .variant_primary_error {
56
- border-color: red;
57
- box-shadow: 0 0 0 2px red;
56
+ border-color: var(--palette-alert);
57
+ box-shadow: 0 0 0 2px var(--palette-alert);
58
58
  }
59
59
  .variant_primary_checked::after {
60
60
  border-block-end: 2px solid var(--palette-white);
package/DotsLoader/DotsLoader.module.css CHANGED
@@ -4,16 +4,6 @@
4
4
  width: 70px;
5
5
  }
6
6
 
7
- .dot {
8
- animation-duration: 1.6s;
9
- animation-iteration-count: infinite;
10
- animation-name: pending;
11
- background-color: var(--palette-black);
12
- border-radius: 5px;
13
- height: 10px;
14
- transform: scale(0);
15
- width: 10px;
16
- }
17
7
  @keyframes pending {
18
8
  0% {
19
9
  transform: scale(0);
@@ -25,6 +15,16 @@
25
15
  transform: scale(0);
26
16
  }
27
17
  }
18
+ .dot {
19
+ animation-duration: 1.6s;
20
+ animation-iteration-count: infinite;
21
+ animation-name: pending;
22
+ background-color: var(--palette-black);
23
+ border-radius: 5px;
24
+ height: 10px;
25
+ transform: scale(0);
26
+ width: 10px;
27
+ }
28
28
  .dot_first {
29
29
  animation-delay: 0s;
30
30
  }
package/Grid/Item/Grid-Item.module.css CHANGED
@@ -5,5 +5,5 @@
5
5
  .item {
6
6
  margin-left: 5px;
7
7
  margin-right: 5px;
8
- flex: 1 1 220px;
8
+ flex: 1 1 250px;
9
9
  }
package/Grid/index.js CHANGED
@@ -19,7 +19,7 @@ var Grid = function Grid(_a) {
19
19
  _c = _a.gridColumnGap,
20
20
  gridColumnGap = _c === void 0 ? 16 : _c,
21
21
  _d = _a.gridItemMinWidth,
22
- gridItemMinWidth = _d === void 0 ? 220 : _d,
22
+ gridItemMinWidth = _d === void 0 ? 250 : _d,
23
23
  className = _a.className;
24
24
  return /*#__PURE__*/React__default.default.createElement("div", {
25
25
  className: classNames__default.default(styles__default.default.root, className),
package/InputRadio/InputRadio.module.css ADDED
@@ -0,0 +1,97 @@
1
+ .label {
2
+ display: inline-block;
3
+ vertical-align: baseline;
4
+ }
5
+
6
+ .text {
7
+ flex-basis: auto;
8
+ flex-grow: 1;
9
+ flex-shrink: 1;
10
+ line-height: 18px;
11
+ margin-inline-start: 8px;
12
+ }
13
+
14
+ .icon {
15
+ background-color: var(--palette-white);
16
+ block-size: 16px;
17
+ border: solid 1px var(--palette-bg-3);
18
+ border-radius: 100%;
19
+ box-sizing: border-box;
20
+ display: block;
21
+ flex-shrink: 0;
22
+ inline-size: 16px;
23
+ margin-block-start: 1px;
24
+ position: relative;
25
+ transition: border-color 0.16s ease, box-shadow 0.16s ease;
26
+ }
27
+
28
+ .container {
29
+ align-items: flex-start;
30
+ cursor: pointer;
31
+ display: flex;
32
+ padding: 3px 0;
33
+ }
34
+ .container_disabled {
35
+ cursor: inherit;
36
+ }
37
+ .container_error .text {
38
+ color: var(--palette-alert);
39
+ }
40
+ .container_error .icon {
41
+ border-color: var(--palette-alert);
42
+ box-shadow: 0 0 0 2px var(--palette-tretiary-2);
43
+ }
44
+
45
+ .input {
46
+ block-size: 1px;
47
+ border: 0;
48
+ clip: rect(0 0 0 0);
49
+ inline-size: 1px;
50
+ margin: -1px;
51
+ overflow: hidden;
52
+ padding: 0;
53
+ position: absolute;
54
+ }
55
+ .input:not(.input_disabled):not(.input_error):hover + .icon {
56
+ border-color: var(--inputradio-primary-background-color-hovered);
57
+ }
58
+ .input:not(.input_disabled):not(.input_error):focus + .icon {
59
+ box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
60
+ }
61
+ .input:not(.input_disabled):not(.input_error):active + .icon {
62
+ background-color: var(--inputradio-primary-background-color-focused);
63
+ border-color: var(--inputradio-primary-border-color-focused);
64
+ box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
65
+ }
66
+ .input:not(.input_disabled):not(.input_error) .input_checked:hover + .icon {
67
+ border-color: var(--inputradio-primary-background-color-hovered);
68
+ }
69
+ .input:not(.input_disabled):not(.input_error) .input_checked:active + .icon {
70
+ background-color: var(--palette-white);
71
+ border: 4px solid var(--inputradio-primary-background-color-checked);
72
+ }
73
+ .input_checked + .icon {
74
+ background-color: var(--palette-white);
75
+ border: 4px solid var(--inputradio-primary-background-color-checked);
76
+ }
77
+ .input_disabled + .icon {
78
+ border-radius: 50%;
79
+ }
80
+ .input_disabled + .icon::after {
81
+ background-color: rgba(246, 246, 246, 0.8);
82
+ content: "";
83
+ display: block;
84
+ inset: 0;
85
+ margin: -1px;
86
+ position: absolute;
87
+ border-radius: 50%;
88
+ }
89
+ .input_checked:disabled + .icon::after {
90
+ margin: -4px;
91
+ }
92
+
93
+ .note {
94
+ color: var(--palette-bg-5);
95
+ margin-block-start: 4px;
96
+ padding-inline-start: 24px;
97
+ }
package/InputRadio/index.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import React from "react";
2
+ import type { FC, CSSProperties, PropsWithChildren, FocusEvent, ChangeEvent } from "react";
3
+ type Props = {
4
+ checked?: boolean;
5
+ className?: string;
6
+ containerClassName?: string;
7
+ disabled?: boolean;
8
+ error?: string;
9
+ id?: string;
10
+ name?: string;
11
+ note?: string;
12
+ onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
13
+ onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
14
+ onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
15
+ onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
16
+ onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
17
+ style?: CSSProperties;
18
+ text?: string;
19
+ value: string | number;
20
+ testid?: string;
21
+ };
22
+ declare const InputRadio: FC<PropsWithChildren<Props>>;
23
+ export default InputRadio;
package/InputRadio/package.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "module": "../esm/InputRadio/index.js",
4
+ "main": "./index.js",
5
+ "types": "./index.d.ts"
6
+ }
package/RadioGroup/Radio.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import React from "react";
2
+ import type { ChangeEvent, FC, FocusEvent } from "react";
3
+ type Props = {
4
+ value: string | number;
5
+ text: string;
6
+ id?: string;
7
+ note?: string;
8
+ name?: string;
9
+ checked?: boolean;
10
+ onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
11
+ onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
12
+ onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
13
+ onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
14
+ className: string;
15
+ disabled?: boolean;
16
+ testId?: string;
17
+ };
18
+ declare const Radio: FC<Props>;
19
+ export default Radio;
package/RadioGroup/RadioGroup.module.css ADDED
@@ -0,0 +1,30 @@
1
+ .group {
2
+ display: inline-flex;
3
+ }
4
+ .group_wide {
5
+ inline-size: 100%;
6
+ }
7
+ .group_column {
8
+ flex-direction: column;
9
+ }
10
+ .group_column .radio:not(:last-child) {
11
+ margin-block-end: 16px;
12
+ }
13
+ .group_wrapped {
14
+ flex-wrap: wrap;
15
+ }
16
+ .group_wrapped .radio {
17
+ inline-size: 100%;
18
+ margin: 8px auto;
19
+ }
20
+ .group_wrapped .radio:first-child {
21
+ margin-block-start: 0;
22
+ }
23
+ .group_wrapped .radio:last-child {
24
+ margin-block-end: 0;
25
+ }
26
+
27
+ .radio {
28
+ line-height: 16px;
29
+ margin-inline-end: 20px;
30
+ }
package/RadioGroup/index.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import React, { FC } from "react";
2
+ export interface Option {
3
+ id?: string;
4
+ val: string | number;
5
+ text: string;
6
+ note?: string;
7
+ name?: string;
8
+ tooltipContent?: () => React.ReactElement;
9
+ onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
10
+ onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
11
+ className?: string;
12
+ disabled?: boolean;
13
+ }
14
+ interface Props {
15
+ val?: string | number;
16
+ options: Option[];
17
+ onChange: (value: string) => void;
18
+ onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
19
+ column?: boolean;
20
+ wrapped?: boolean;
21
+ className?: string;
22
+ disabled?: boolean;
23
+ hasError?: boolean;
24
+ }
25
+ declare const RadioGroup: FC<Props>;
26
+ export default RadioGroup;
package/RadioGroup/package.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "module": "../esm/RadioGroup/index.js",
4
+ "main": "./index.js",
5
+ "types": "./index.d.ts"
6
+ }
package/Theme/global.css CHANGED
@@ -17,6 +17,9 @@
17
17
  margin: 0;
18
18
  padding: 0;
19
19
  }
20
+ [data-page=colibri-ui] *, [data-page=colibri-ui] *::before, [data-page=colibri-ui] *::after {
21
+ box-sizing: inherit;
22
+ }
20
23
  [data-page=colibri-ui] input,
21
24
  [data-page=colibri-ui] textarea,
22
25
  [data-page=colibri-ui] select,
package/Theme/index.d.ts CHANGED
@@ -73,6 +73,11 @@ export declare const THEMES: {
73
73
  "checkbox-primary-border-color-active": string;
74
74
  "checkbox-primary-box-shadow-active": string;
75
75
  "checkbox-primary-background-color-disabled": string;
76
+ "inputradio-primary-background-color-checked": string;
77
+ "inputradio-primary-background-color-hovered": string;
78
+ "inputradio-primary-box-shadow-focused": string;
79
+ "inputradio-primary-background-color-focused": string;
80
+ "inputradio-primary-border-color-focused": string;
76
81
  "switch-primary-background-color": string;
77
82
  "switch-primary-border-color": string;
78
83
  "switch-primary-background-color-checked": string;
package/Theme/themes/default.d.ts CHANGED
@@ -72,6 +72,11 @@ declare const _default: {
72
72
  "checkbox-primary-border-color-active": string;
73
73
  "checkbox-primary-box-shadow-active": string;
74
74
  "checkbox-primary-background-color-disabled": string;
75
+ "inputradio-primary-background-color-checked": string;
76
+ "inputradio-primary-background-color-hovered": string;
77
+ "inputradio-primary-box-shadow-focused": string;
78
+ "inputradio-primary-background-color-focused": string;
79
+ "inputradio-primary-border-color-focused": string;
75
80
  "switch-primary-background-color": string;
76
81
  "switch-primary-border-color": string;
77
82
  "switch-primary-background-color-checked": string;
package/Theme/themes/default.js CHANGED
@@ -78,6 +78,11 @@ var THEME_DEFAULT = {
78
78
  "checkbox-primary-border-color-active": color.Color.PRIMARY_4,
79
79
  "checkbox-primary-box-shadow-active": color.Color.PRIMARY_4,
80
80
  "checkbox-primary-background-color-disabled": color.Color.PRIMARY_1,
81
+ "inputradio-primary-background-color-checked": color.Color.PRIMARY_4,
82
+ "inputradio-primary-background-color-hovered": color.Color.PRIMARY_4,
83
+ "inputradio-primary-box-shadow-focused": color.Color.PRIMARY_1,
84
+ "inputradio-primary-background-color-focused": color.Color.PRIMARY_1,
85
+ "inputradio-primary-border-color-focused": color.Color.PRIMARY_1,
81
86
  "switch-primary-background-color": color.Color.BG_2,
82
87
  "switch-primary-border-color": color.Color.BG_2,
83
88
  "switch-primary-background-color-checked": color.Color.PRIMARY_5,
package/Typography/index.props.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CSSProperties } from "react";
1
+ import type { CSSProperties } from "react";
2
2
  export type TypographyVariant = "alert" | "success" | "secondary";
3
3
  export type TypographyFontWeight = "normal" | "medium" | "bold";
4
4
  export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
package/esm/Checkbox/Checkbox.module.css CHANGED
@@ -53,8 +53,8 @@
53
53
  }
54
54
 
55
55
  .variant_primary_error {
56
- border-color: red;
57
- box-shadow: 0 0 0 2px red;
56
+ border-color: var(--palette-alert);
57
+ box-shadow: 0 0 0 2px var(--palette-alert);
58
58
  }
59
59
  .variant_primary_checked::after {
60
60
  border-block-end: 2px solid var(--palette-white);
package/esm/DotsLoader/DotsLoader.module.css CHANGED
@@ -4,16 +4,6 @@
4
4
  width: 70px;
5
5
  }
6
6
 
7
- .dot {
8
- animation-duration: 1.6s;
9
- animation-iteration-count: infinite;
10
- animation-name: pending;
11
- background-color: var(--palette-black);
12
- border-radius: 5px;
13
- height: 10px;
14
- transform: scale(0);
15
- width: 10px;
16
- }
17
7
  @keyframes pending {
18
8
  0% {
19
9
  transform: scale(0);
@@ -25,6 +15,16 @@
25
15
  transform: scale(0);
26
16
  }
27
17
  }
18
+ .dot {
19
+ animation-duration: 1.6s;
20
+ animation-iteration-count: infinite;
21
+ animation-name: pending;
22
+ background-color: var(--palette-black);
23
+ border-radius: 5px;
24
+ height: 10px;
25
+ transform: scale(0);
26
+ width: 10px;
27
+ }
28
28
  .dot_first {
29
29
  animation-delay: 0s;
30
30
  }
package/esm/Grid/Item/Grid-Item.module.css CHANGED
@@ -5,5 +5,5 @@
5
5
  .item {
6
6
  margin-left: 5px;
7
7
  margin-right: 5px;
8
- flex: 1 1 220px;
8
+ flex: 1 1 250px;
9
9
  }
package/esm/Grid/index.js CHANGED
@@ -9,7 +9,7 @@ var Grid = function Grid(_a) {
9
9
  _c = _a.gridColumnGap,
10
10
  gridColumnGap = _c === void 0 ? 16 : _c,
11
11
  _d = _a.gridItemMinWidth,
12
- gridItemMinWidth = _d === void 0 ? 220 : _d,
12
+ gridItemMinWidth = _d === void 0 ? 250 : _d,
13
13
  className = _a.className;
14
14
  return /*#__PURE__*/React.createElement("div", {
15
15
  className: classNames(styles.root, className),
package/esm/InputRadio/InputRadio.module.css ADDED
@@ -0,0 +1,97 @@
1
+ .label {
2
+ display: inline-block;
3
+ vertical-align: baseline;
4
+ }
5
+
6
+ .text {
7
+ flex-basis: auto;
8
+ flex-grow: 1;
9
+ flex-shrink: 1;
10
+ line-height: 18px;
11
+ margin-inline-start: 8px;
12
+ }
13
+
14
+ .icon {
15
+ background-color: var(--palette-white);
16
+ block-size: 16px;
17
+ border: solid 1px var(--palette-bg-3);
18
+ border-radius: 100%;
19
+ box-sizing: border-box;
20
+ display: block;
21
+ flex-shrink: 0;
22
+ inline-size: 16px;
23
+ margin-block-start: 1px;
24
+ position: relative;
25
+ transition: border-color 0.16s ease, box-shadow 0.16s ease;
26
+ }
27
+
28
+ .container {
29
+ align-items: flex-start;
30
+ cursor: pointer;
31
+ display: flex;
32
+ padding: 3px 0;
33
+ }
34
+ .container_disabled {
35
+ cursor: inherit;
36
+ }
37
+ .container_error .text {
38
+ color: var(--palette-alert);
39
+ }
40
+ .container_error .icon {
41
+ border-color: var(--palette-alert);
42
+ box-shadow: 0 0 0 2px var(--palette-tretiary-2);
43
+ }
44
+
45
+ .input {
46
+ block-size: 1px;
47
+ border: 0;
48
+ clip: rect(0 0 0 0);
49
+ inline-size: 1px;
50
+ margin: -1px;
51
+ overflow: hidden;
52
+ padding: 0;
53
+ position: absolute;
54
+ }
55
+ .input:not(.input_disabled):not(.input_error):hover + .icon {
56
+ border-color: var(--inputradio-primary-background-color-hovered);
57
+ }
58
+ .input:not(.input_disabled):not(.input_error):focus + .icon {
59
+ box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
60
+ }
61
+ .input:not(.input_disabled):not(.input_error):active + .icon {
62
+ background-color: var(--inputradio-primary-background-color-focused);
63
+ border-color: var(--inputradio-primary-border-color-focused);
64
+ box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
65
+ }
66
+ .input:not(.input_disabled):not(.input_error) .input_checked:hover + .icon {
67
+ border-color: var(--inputradio-primary-background-color-hovered);
68
+ }
69
+ .input:not(.input_disabled):not(.input_error) .input_checked:active + .icon {
70
+ background-color: var(--palette-white);
71
+ border: 4px solid var(--inputradio-primary-background-color-checked);
72
+ }
73
+ .input_checked + .icon {
74
+ background-color: var(--palette-white);
75
+ border: 4px solid var(--inputradio-primary-background-color-checked);
76
+ }
77
+ .input_disabled + .icon {
78
+ border-radius: 50%;
79
+ }
80
+ .input_disabled + .icon::after {
81
+ background-color: rgba(246, 246, 246, 0.8);
82
+ content: "";
83
+ display: block;
84
+ inset: 0;
85
+ margin: -1px;
86
+ position: absolute;
87
+ border-radius: 50%;
88
+ }
89
+ .input_checked:disabled + .icon::after {
90
+ margin: -4px;
91
+ }
92
+
93
+ .note {
94
+ color: var(--palette-bg-5);
95
+ margin-block-start: 4px;
96
+ padding-inline-start: 24px;
97
+ }
package/esm/InputRadio/index.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import React from "react";
2
+ import type { FC, CSSProperties, PropsWithChildren, FocusEvent, ChangeEvent } from "react";
3
+ type Props = {
4
+ checked?: boolean;
5
+ className?: string;
6
+ containerClassName?: string;
7
+ disabled?: boolean;
8
+ error?: string;
9
+ id?: string;
10
+ name?: string;
11
+ note?: string;
12
+ onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
13
+ onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
14
+ onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
15
+ onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
16
+ onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
17
+ style?: CSSProperties;
18
+ text?: string;
19
+ value: string | number;
20
+ testid?: string;
21
+ };
22
+ declare const InputRadio: FC<PropsWithChildren<Props>>;
23
+ export default InputRadio;
package/esm/RadioGroup/Radio.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import React from "react";
2
+ import type { ChangeEvent, FC, FocusEvent } from "react";
3
+ type Props = {
4
+ value: string | number;
5
+ text: string;
6
+ id?: string;
7
+ note?: string;
8
+ name?: string;
9
+ checked?: boolean;
10
+ onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
11
+ onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
12
+ onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
13
+ onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
14
+ className: string;
15
+ disabled?: boolean;
16
+ testId?: string;
17
+ };
18
+ declare const Radio: FC<Props>;
19
+ export default Radio;
package/esm/RadioGroup/RadioGroup.module.css ADDED
@@ -0,0 +1,30 @@
1
+ .group {
2
+ display: inline-flex;
3
+ }
4
+ .group_wide {
5
+ inline-size: 100%;
6
+ }
7
+ .group_column {
8
+ flex-direction: column;
9
+ }
10
+ .group_column .radio:not(:last-child) {
11
+ margin-block-end: 16px;
12
+ }
13
+ .group_wrapped {
14
+ flex-wrap: wrap;
15
+ }
16
+ .group_wrapped .radio {
17
+ inline-size: 100%;
18
+ margin: 8px auto;
19
+ }
20
+ .group_wrapped .radio:first-child {
21
+ margin-block-start: 0;
22
+ }
23
+ .group_wrapped .radio:last-child {
24
+ margin-block-end: 0;
25
+ }
26
+
27
+ .radio {
28
+ line-height: 16px;
29
+ margin-inline-end: 20px;
30
+ }
package/esm/RadioGroup/index.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ import React, { FC } from "react";
2
+ export interface Option {
3
+ id?: string;
4
+ val: string | number;
5
+ text: string;
6
+ note?: string;
7
+ name?: string;
8
+ tooltipContent?: () => React.ReactElement;
9
+ onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
10
+ onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
11
+ className?: string;
12
+ disabled?: boolean;
13
+ }
14
+ interface Props {
15
+ val?: string | number;
16
+ options: Option[];
17
+ onChange: (value: string) => void;
18
+ onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
19
+ column?: boolean;
20
+ wrapped?: boolean;
21
+ className?: string;
22
+ disabled?: boolean;
23
+ hasError?: boolean;
24
+ }
25
+ declare const RadioGroup: FC<Props>;
26
+ export default RadioGroup;
package/esm/Theme/global.css CHANGED
@@ -17,6 +17,9 @@
17
17
  margin: 0;
18
18
  padding: 0;
19
19
  }
20
+ [data-page=colibri-ui] *, [data-page=colibri-ui] *::before, [data-page=colibri-ui] *::after {
21
+ box-sizing: inherit;
22
+ }
20
23
  [data-page=colibri-ui] input,
21
24
  [data-page=colibri-ui] textarea,
22
25
  [data-page=colibri-ui] select,
package/esm/Theme/index.d.ts CHANGED
@@ -73,6 +73,11 @@ export declare const THEMES: {
73
73
  "checkbox-primary-border-color-active": string;
74
74
  "checkbox-primary-box-shadow-active": string;
75
75
  "checkbox-primary-background-color-disabled": string;
76
+ "inputradio-primary-background-color-checked": string;
77
+ "inputradio-primary-background-color-hovered": string;
78
+ "inputradio-primary-box-shadow-focused": string;
79
+ "inputradio-primary-background-color-focused": string;
80
+ "inputradio-primary-border-color-focused": string;
76
81
  "switch-primary-background-color": string;
77
82
  "switch-primary-border-color": string;
78
83
  "switch-primary-background-color-checked": string;
package/esm/Theme/themes/default.d.ts CHANGED
@@ -72,6 +72,11 @@ declare const _default: {
72
72
  "checkbox-primary-border-color-active": string;
73
73
  "checkbox-primary-box-shadow-active": string;
74
74
  "checkbox-primary-background-color-disabled": string;
75
+ "inputradio-primary-background-color-checked": string;
76
+ "inputradio-primary-background-color-hovered": string;
77
+ "inputradio-primary-box-shadow-focused": string;
78
+ "inputradio-primary-background-color-focused": string;
79
+ "inputradio-primary-border-color-focused": string;
75
80
  "switch-primary-background-color": string;
76
81
  "switch-primary-border-color": string;
77
82
  "switch-primary-background-color-checked": string;
package/esm/Theme/themes/default.js CHANGED
@@ -74,6 +74,11 @@ var THEME_DEFAULT = {
74
74
  "checkbox-primary-border-color-active": Color.PRIMARY_4,
75
75
  "checkbox-primary-box-shadow-active": Color.PRIMARY_4,
76
76
  "checkbox-primary-background-color-disabled": Color.PRIMARY_1,
77
+ "inputradio-primary-background-color-checked": Color.PRIMARY_4,
78
+ "inputradio-primary-background-color-hovered": Color.PRIMARY_4,
79
+ "inputradio-primary-box-shadow-focused": Color.PRIMARY_1,
80
+ "inputradio-primary-background-color-focused": Color.PRIMARY_1,
81
+ "inputradio-primary-border-color-focused": Color.PRIMARY_1,
77
82
  "switch-primary-background-color": Color.BG_2,
78
83
  "switch-primary-border-color": Color.BG_2,
79
84
  "switch-primary-background-color-checked": Color.PRIMARY_5,
package/esm/Typography/index.props.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CSSProperties } from "react";
1
+ import type { CSSProperties } from "react";
2
2
  export type TypographyVariant = "alert" | "success" | "secondary";
3
3
  export type TypographyFontWeight = "normal" | "medium" | "bold";
4
4
  export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
package/esm/theme_default_variables.css CHANGED
@@ -72,6 +72,11 @@
72
72
  --checkbox-primary-border-color-active: #067AFF;
73
73
  --checkbox-primary-box-shadow-active: #067AFF;
74
74
  --checkbox-primary-background-color-disabled: #E8F0FE;
75
+ --inputradio-primary-background-color-checked: #067AFF;
76
+ --inputradio-primary-background-color-hovered: #067AFF;
77
+ --inputradio-primary-box-shadow-focused: #E8F0FE;
78
+ --inputradio-primary-background-color-focused: #E8F0FE;
79
+ --inputradio-primary-border-color-focused: #E8F0FE;
75
80
  --switch-primary-background-color: #e6e6e6;
76
81
  --switch-primary-border-color: #e6e6e6;
77
82
  --switch-primary-background-color-checked: #0066DC;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.7.53",
3
+ "version": "0.7.55",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "scripts": {},
@@ -24,7 +24,6 @@
24
24
  "dependencies": {
25
25
  "@popperjs/core": "^2.11.8",
26
26
  "classnames": "^2.5.1",
27
- "cssmem": "^1.3.0",
28
27
  "react": "^17.0.0 || ^18.0.0",
29
28
  "react-dom": "^17.0.0 || ^18.0.0",
30
29
  "react-popper": "^2.3.0"
package/theme_default_variables.css CHANGED
@@ -72,6 +72,11 @@
72
72
  --checkbox-primary-border-color-active: #067AFF;
73
73
  --checkbox-primary-box-shadow-active: #067AFF;
74
74
  --checkbox-primary-background-color-disabled: #E8F0FE;
75
+ --inputradio-primary-background-color-checked: #067AFF;
76
+ --inputradio-primary-background-color-hovered: #067AFF;
77
+ --inputradio-primary-box-shadow-focused: #E8F0FE;
78
+ --inputradio-primary-background-color-focused: #E8F0FE;
79
+ --inputradio-primary-border-color-focused: #E8F0FE;
75
80
  --switch-primary-background-color: #e6e6e6;
76
81
  --switch-primary-border-color: #e6e6e6;
77
82
  --switch-primary-background-color-checked: #0066DC;