@semcore/input 3.4.1 → 3.5.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.
Files changed (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/lib/cjs/Input.js +17 -17
  3. package/lib/cjs/index.d.js.map +1 -1
  4. package/lib/cjs/style/input.shadow.css +29 -30
  5. package/lib/es6/Input.js +17 -17
  6. package/lib/es6/index.d.js.map +1 -1
  7. package/lib/es6/style/input.shadow.css +29 -30
  8. package/lib/types/index.d.ts +1 -1
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [3.5.0] - 2022-12-12
6
+
7
+ ### Added
8
+
9
+ - Design tokens based theming.
10
+
11
+ ## [3.4.2] - 2022-12-06
12
+
13
+ ### Added
14
+
15
+ - Added type `IInputCtx` for export.
16
+
5
17
  ## [3.4.1] - 2022-11-30
6
18
 
7
19
  ### Fixed
package/lib/cjs/Input.js CHANGED
@@ -52,26 +52,26 @@ var style = (
52
52
  /*__reshadow_css_start__*/
53
53
  _core.sstyled.insert(
54
54
  /*__inner_css_start__*/
55
- ".___SInput_1kuab_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1kuab_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1kuab_gg_ input:-webkit-autofill~.___SOutline_1kuab_gg_{background-color:#faffbd}.___SValue_1kuab_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_1kuab_gg_:focus{outline:none}.___SValue_1kuab_gg_::-moz-placeholder{color:#a9abb6}.___SValue_1kuab_gg_::placeholder{color:#a9abb6}.___SValue_1kuab_gg_:not(:disabled):-moz-read-only~.___SOutline_1kuab_gg_{background:#f4f5f9}.___SValue_1kuab_gg_:not(:disabled):read-only~.___SOutline_1kuab_gg_{background:#f4f5f9}.___SValue_1kuab_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.3}.___SValue_1kuab_gg_:disabled~.___SOutline_1kuab_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_1kuab_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_1kuab_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_1kuab_gg_.__interactive_1kuab_gg_{cursor:pointer}.___SAddon_1kuab_gg_.__interactive_1kuab_gg_:hover{color:#8a8e9b}.___SAddon_1kuab_gg_.__disabled_1kuab_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_1kuab_gg_._size_m_1kuab_gg_{font-size:14px;height:28px}.___SValue_1kuab_gg_._size_l_1kuab_gg_,.___SValue_1kuab_gg_._size_m_1kuab_gg_{padding:0 8px}.___SInput_1kuab_gg_._size_l_1kuab_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_1kuab_gg_.__focused_1kuab_gg_{z-index:1}.___SInput_1kuab_gg_._state_normal_1kuab_gg_ .___SOutline_1kuab_gg_{border-color:#c4c7cf}.___SInput_1kuab_gg_._state_normal_1kuab_gg_ .___SValue_1kuab_gg_:focus~.___SOutline_1kuab_gg_{border-color:#006dca;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___SInput_1kuab_gg_._state_valid_1kuab_gg_ .___SOutline_1kuab_gg_{border-color:#59ddaa}.___SInput_1kuab_gg_._state_valid_1kuab_gg_ .___SValue_1kuab_gg_:focus~.___SOutline_1kuab_gg_{border-color:#007c65;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.3)}.___SInput_1kuab_gg_._state_invalid_1kuab_gg_ .___SOutline_1kuab_gg_{border-color:#ffaeb5}.___SInput_1kuab_gg_._state_invalid_1kuab_gg_ .___SValue_1kuab_gg_:focus~.___SOutline_1kuab_gg_{border-color:#d1002f;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.3)}.___SInput_1kuab_gg_._neighborLocation_right_1kuab_gg_ .___SOutline_1kuab_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1kuab_gg_._neighborLocation_both_1kuab_gg_ .___SOutline_1kuab_gg_{border-radius:0;border-left:none}.___SInput_1kuab_gg_._neighborLocation_left_1kuab_gg_ .___SOutline_1kuab_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1kuab_gg_._neighborLocation_right_1kuab_gg_{padding-right:0}.___SValue_1kuab_gg_._neighborLocation_both_1kuab_gg_{padding-left:0;padding-right:0}.___SValue_1kuab_gg_._neighborLocation_left_1kuab_gg_{padding-left:0}"
55
+ ".___SInput_1p9v8_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1p9v8_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-rounded-medium,6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1p9v8_gg_ input:-webkit-autofill~.___SOutline_1p9v8_gg_{background-color:#faffbd}.___SValue_1p9v8_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:var(--intergalactic-text-primary,#191b23);font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_1p9v8_gg_:focus{outline:none}.___SValue_1p9v8_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder,#a9abb6)}.___SValue_1p9v8_gg_::placeholder{color:var(--intergalactic-text-placeholder,#a9abb6)}.___SValue_1p9v8_gg_:not(:disabled):-moz-read-only~.___SOutline_1p9v8_gg_{background:var(--intergalactic-bg-secondary-neutral,#f4f5f9)}.___SValue_1p9v8_gg_:not(:disabled):read-only~.___SOutline_1p9v8_gg_{background:var(--intergalactic-bg-secondary-neutral,#f4f5f9)}.___SValue_1p9v8_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity,.3)}.___SValue_1p9v8_gg_:disabled~.___SOutline_1p9v8_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___SOutline_1p9v8_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:var(--intergalactic-rounded-medium,6px);z-index:-1;background:var(--intergalactic-bg-primary-neutral,#fff)}.___SAddon_1p9v8_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 var(--intergalactic-spacing-2x,8px);height:100%;color:var(--intergalactic-icon-secondary-neutral,#a9abb6)}.___SAddon_1p9v8_gg_.__interactive_1p9v8_gg_{cursor:pointer}.___SAddon_1p9v8_gg_.__interactive_1p9v8_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SAddon_1p9v8_gg_.__disabled_1p9v8_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___SInput_1p9v8_gg_._size_m_1p9v8_gg_{font-size:var(--intergalactic-fs-200,14px);height:var(--intergalactic-form-control-m,28px)}.___SValue_1p9v8_gg_._size_l_1p9v8_gg_,.___SValue_1p9v8_gg_._size_m_1p9v8_gg_{padding:0 var(--intergalactic-spacing-2x,8px)}.___SInput_1p9v8_gg_._size_l_1p9v8_gg_{font-size:var(--intergalactic-fs-300,16px);height:var(--intergalactic-form-control-l,40px);padding-left:var(--intergalactic-spacing-1x,4px);padding-right:var(--intergalactic-spacing-1x,4px)}.___SInput_1p9v8_gg_.__focused_1p9v8_gg_{z-index:1}.___SInput_1p9v8_gg_._state_normal_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-primary,#c4c7cf)}.___SInput_1p9v8_gg_._state_normal_1p9v8_gg_ .___SValue_1p9v8_gg_:focus~.___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-info-active,#006dca);box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___SInput_1p9v8_gg_._state_valid_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-success,#59ddaa)}.___SInput_1p9v8_gg_._state_valid_1p9v8_gg_ .___SValue_1p9v8_gg_:focus~.___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-success-active,#007c65);box-shadow:var(--intergalactic-keyboard-focus-valid,0 0 0 3px rgba(0,159,129,.3))}.___SInput_1p9v8_gg_._state_invalid_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-danger,#ffaeb5)}.___SInput_1p9v8_gg_._state_invalid_1p9v8_gg_ .___SValue_1p9v8_gg_:focus~.___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-danger-active,#d1002f);box-shadow:var(--intergalactic-keyboard-focus-invalid,0 0 0 3px rgba(255,73,83,.3))}.___SInput_1p9v8_gg_._neighborLocation_right_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1p9v8_gg_._neighborLocation_both_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-radius:0;border-left:none}.___SInput_1p9v8_gg_._neighborLocation_left_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1p9v8_gg_._neighborLocation_right_1p9v8_gg_{padding-right:0}.___SValue_1p9v8_gg_._neighborLocation_both_1p9v8_gg_{padding-left:0;padding-right:0}.___SValue_1p9v8_gg_._neighborLocation_left_1p9v8_gg_{padding-left:0}"
56
56
  /*__inner_css_end__*/
57
- , "1kuab_gg_")
57
+ , "1p9v8_gg_")
58
58
  /*__reshadow_css_end__*/
59
59
  , {
60
- "__SInput": "___SInput_1kuab_gg_",
61
- "__SOutline": "___SOutline_1kuab_gg_",
62
- "__SValue": "___SValue_1kuab_gg_",
63
- "__SAddon": "___SAddon_1kuab_gg_",
64
- "_interactive": "__interactive_1kuab_gg_",
65
- "_disabled": "__disabled_1kuab_gg_",
66
- "_size_m": "_size_m_1kuab_gg_",
67
- "_size_l": "_size_l_1kuab_gg_",
68
- "_focused": "__focused_1kuab_gg_",
69
- "_state_normal": "_state_normal_1kuab_gg_",
70
- "_state_valid": "_state_valid_1kuab_gg_",
71
- "_state_invalid": "_state_invalid_1kuab_gg_",
72
- "_neighborLocation_right": "_neighborLocation_right_1kuab_gg_",
73
- "_neighborLocation_both": "_neighborLocation_both_1kuab_gg_",
74
- "_neighborLocation_left": "_neighborLocation_left_1kuab_gg_"
60
+ "__SInput": "___SInput_1p9v8_gg_",
61
+ "__SOutline": "___SOutline_1p9v8_gg_",
62
+ "__SValue": "___SValue_1p9v8_gg_",
63
+ "__SAddon": "___SAddon_1p9v8_gg_",
64
+ "_interactive": "__interactive_1p9v8_gg_",
65
+ "_disabled": "__disabled_1p9v8_gg_",
66
+ "_size_m": "_size_m_1p9v8_gg_",
67
+ "_size_l": "_size_l_1p9v8_gg_",
68
+ "_focused": "__focused_1p9v8_gg_",
69
+ "_state_normal": "_state_normal_1p9v8_gg_",
70
+ "_state_valid": "_state_valid_1p9v8_gg_",
71
+ "_state_invalid": "_state_invalid_1p9v8_gg_",
72
+ "_neighborLocation_right": "_neighborLocation_right_1p9v8_gg_",
73
+ "_neighborLocation_both": "_neighborLocation_both_1p9v8_gg_",
74
+ "_neighborLocation_left": "_neighborLocation_left_1p9v8_gg_"
75
75
  });
76
76
 
77
77
  var Input = /*#__PURE__*/function (_Component) {
package/lib/cjs/index.d.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn } from '@semcore/core';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\n/* utils type */\n\nexport type InputSize = 'm' | 'l';\n\nexport interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {\n /**\n * Sets the input and addons to the disabled state\n * */\n disabled?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n /**\n * Sets the input state\n * @default normal\n */\n state?: 'normal' | 'invalid' | 'valid';\n}\n\nexport interface IInputValueProps\n extends IBoxProps,\n INeighborItemProps,\n IWithAutoFocusEnhanceProps {\n /**\n * Input value\n */\n value?: string;\n /**\n * Default value if `value` property is not provided\n */\n defaultValue?: string;\n /**\n * Handler for changing the value\n */\n onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;\n /**\n * Sets the input to the disabled state\n * */\n disabled?: boolean;\n /**\n * Sets the input to the read-only state\n * */\n readOnly?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n}\n\nexport interface IInputAddonProps extends IBoxProps, INeighborItemProps {\n /**\n * Adds styles for interactive icons\n */\n interactive?: boolean;\n /**\n * Blocks the addon\n * */\n disabled?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n}\n\ninterface IInputCtx {\n getValueProps: PropGetterFn;\n getAddonProps: PropGetterFn;\n}\n\ndeclare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {\n Value: <T>(props: IInputValueProps & T) => ReturnEl;\n Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;\n};\nexport default Input;\n"],"mappings":""}
1
+ {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn } from '@semcore/core';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\n/* utils type */\n\nexport type InputSize = 'm' | 'l';\n\nexport interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {\n /**\n * Sets the input and addons to the disabled state\n * */\n disabled?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n /**\n * Sets the input state\n * @default normal\n */\n state?: 'normal' | 'invalid' | 'valid';\n}\n\nexport interface IInputValueProps\n extends IBoxProps,\n INeighborItemProps,\n IWithAutoFocusEnhanceProps {\n /**\n * Input value\n */\n value?: string;\n /**\n * Default value if `value` property is not provided\n */\n defaultValue?: string;\n /**\n * Handler for changing the value\n */\n onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;\n /**\n * Sets the input to the disabled state\n * */\n disabled?: boolean;\n /**\n * Sets the input to the read-only state\n * */\n readOnly?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n}\n\nexport interface IInputAddonProps extends IBoxProps, INeighborItemProps {\n /**\n * Adds styles for interactive icons\n */\n interactive?: boolean;\n /**\n * Blocks the addon\n * */\n disabled?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n}\n\nexport interface IInputCtx {\n getValueProps: PropGetterFn;\n getAddonProps: PropGetterFn;\n}\n\ndeclare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {\n Value: <T>(props: IInputValueProps & T) => ReturnEl;\n Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;\n};\nexport default Input;\n"],"mappings":""}
package/lib/cjs/style/input.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SInput {
4
2
  display: inline-flex;
5
3
  width: 100%;
@@ -7,11 +5,12 @@ SInput {
7
5
  position: relative;
8
6
  z-index: 0;
9
7
  vertical-align: middle;
8
+ /* disable-tokens-validator */
10
9
  padding: 1px;
11
10
  box-sizing: border-box;
12
11
 
13
12
  & input:-webkit-autofill {
14
- border-radius: var(--rounded-m);
13
+ border-radius: var(--intergalactic-rounded-medium, 6px);
15
14
  -webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;
16
15
 
17
16
  & ~ SOutline {
@@ -28,7 +27,7 @@ SValue {
28
27
  padding: 0;
29
28
  border: none;
30
29
  box-sizing: border-box;
31
- color: var(--gray-800);
30
+ color: var(--intergalactic-text-primary, #191b23);
32
31
  font-size: inherit;
33
32
  text-overflow: ellipsis;
34
33
  font-family: inherit;
@@ -39,19 +38,19 @@ SValue {
39
38
  }
40
39
 
41
40
  &::placeholder {
42
- color: var(--gray-300);
41
+ color: var(--intergalactic-text-placeholder, #a9abb6);
43
42
  }
44
43
 
45
44
  &:not(:disabled):read-only ~ SOutline {
46
- background: var(--gray-50);
45
+ background: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
47
46
  }
48
47
 
49
48
  &:disabled {
50
49
  user-select: none;
51
- opacity: var(--disabled-opacity);
50
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
52
51
 
53
52
  & ~ SOutline {
54
- opacity: var(--disabled-opacity);
53
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
55
54
  cursor: default;
56
55
  pointer-events: none;
57
56
  }
@@ -65,9 +64,9 @@ SOutline {
65
64
  bottom: 0;
66
65
  left: 0;
67
66
  border: 1px solid;
68
- border-radius: var(--rounded-m);
67
+ border-radius: var(--intergalactic-rounded-medium, 6px);
69
68
  z-index: -1;
70
- background: #fff;
69
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
71
70
  }
72
71
 
73
72
  SAddon {
@@ -75,40 +74,40 @@ SAddon {
75
74
  justify-content: center;
76
75
  align-items: center;
77
76
  flex: 0 0 auto;
78
- padding: 0 8px;
77
+ padding: 0 var(--intergalactic-spacing-2x, 8px);
79
78
  height: 100%;
80
- color: var(--gray-300);
79
+ color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
81
80
  }
82
81
 
83
82
  SAddon[interactive] {
84
83
  cursor: pointer;
85
84
 
86
85
  &:hover {
87
- color: var(--gray-400);
86
+ color: var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b);
88
87
  }
89
88
  }
90
89
 
91
90
  SAddon[disabled] {
92
- opacity: var(--disabled-opacity);
91
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
93
92
  cursor: default;
94
93
  pointer-events: none;
95
94
  }
96
95
 
97
96
  SInput[size='m'] {
98
- font-size: var(--fs-200);
99
- height: var(--form-control-m);
97
+ font-size: var(--intergalactic-fs-200, 14px);
98
+ height: var(--intergalactic-form-control-m, 28px);
100
99
  }
101
100
 
102
101
  SValue[size='m'],
103
102
  SValue[size='l'] {
104
- padding: 0 8px;
103
+ padding: 0 var(--intergalactic-spacing-2x, 8px);
105
104
  }
106
105
 
107
106
  SInput[size='l'] {
108
- font-size: var(--fs-300);
109
- height: var(--form-control-l);
110
- padding-left: 4px;
111
- padding-right: 4px;
107
+ font-size: var(--intergalactic-fs-300, 16px);
108
+ height: var(--intergalactic-form-control-l, 40px);
109
+ padding-left: var(--intergalactic-spacing-1x, 4px);
110
+ padding-right: var(--intergalactic-spacing-1x, 4px);
112
111
  }
113
112
 
114
113
  SInput[focused] {
@@ -117,32 +116,32 @@ SInput[focused] {
117
116
 
118
117
  SInput[state='normal'] {
119
118
  & SOutline {
120
- border-color: var(--gray-200);
119
+ border-color: var(--intergalactic-border-primary, #c4c7cf);
121
120
  }
122
121
 
123
122
  & SValue:focus ~ SOutline {
124
- border-color: var(--blue-500);
125
- box-shadow: var(--keyboard-focus);
123
+ border-color: var(--intergalactic-border-info-active, #006dca);
124
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
126
125
  }
127
126
  }
128
127
  SInput[state='valid'] {
129
128
  & SOutline {
130
- border-color: var(--green-200);
129
+ border-color: var(--intergalactic-border-success, #59ddaa);
131
130
  }
132
131
 
133
132
  & SValue:focus ~ SOutline {
134
- border-color: var(--green-500);
135
- box-shadow: var(--keyboard-focus-valid);
133
+ border-color: var(--intergalactic-border-success-active, #007c65);
134
+ box-shadow: var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.3));
136
135
  }
137
136
  }
138
137
  SInput[state='invalid'] {
139
138
  & SOutline {
140
- border-color: var(--red-200);
139
+ border-color: var(--intergalactic-border-danger, #ffaeb5);
141
140
  }
142
141
 
143
142
  & SValue:focus ~ SOutline {
144
- border-color: var(--red-500);
145
- box-shadow: var(--keyboard-focus-invalid);
143
+ border-color: var(--intergalactic-border-danger-active, #d1002f);
144
+ box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.3));
146
145
  }
147
146
  }
148
147
 
package/lib/es6/Input.js CHANGED
@@ -30,26 +30,26 @@ var style = (
30
30
  /*__reshadow_css_start__*/
31
31
  _sstyled.insert(
32
32
  /*__inner_css_start__*/
33
- ".___SInput_1kuab_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1kuab_gg_ input:-webkit-autofill{border-radius:6px;-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1kuab_gg_ input:-webkit-autofill~.___SOutline_1kuab_gg_{background-color:#faffbd}.___SValue_1kuab_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:#191b23;font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_1kuab_gg_:focus{outline:none}.___SValue_1kuab_gg_::-moz-placeholder{color:#a9abb6}.___SValue_1kuab_gg_::placeholder{color:#a9abb6}.___SValue_1kuab_gg_:not(:disabled):-moz-read-only~.___SOutline_1kuab_gg_{background:#f4f5f9}.___SValue_1kuab_gg_:not(:disabled):read-only~.___SOutline_1kuab_gg_{background:#f4f5f9}.___SValue_1kuab_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.3}.___SValue_1kuab_gg_:disabled~.___SOutline_1kuab_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SOutline_1kuab_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:6px;z-index:-1;background:#fff}.___SAddon_1kuab_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 8px;height:100%;color:#a9abb6}.___SAddon_1kuab_gg_.__interactive_1kuab_gg_{cursor:pointer}.___SAddon_1kuab_gg_.__interactive_1kuab_gg_:hover{color:#8a8e9b}.___SAddon_1kuab_gg_.__disabled_1kuab_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SInput_1kuab_gg_._size_m_1kuab_gg_{font-size:14px;height:28px}.___SValue_1kuab_gg_._size_l_1kuab_gg_,.___SValue_1kuab_gg_._size_m_1kuab_gg_{padding:0 8px}.___SInput_1kuab_gg_._size_l_1kuab_gg_{font-size:16px;height:40px;padding-left:4px;padding-right:4px}.___SInput_1kuab_gg_.__focused_1kuab_gg_{z-index:1}.___SInput_1kuab_gg_._state_normal_1kuab_gg_ .___SOutline_1kuab_gg_{border-color:#c4c7cf}.___SInput_1kuab_gg_._state_normal_1kuab_gg_ .___SValue_1kuab_gg_:focus~.___SOutline_1kuab_gg_{border-color:#006dca;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.3)}.___SInput_1kuab_gg_._state_valid_1kuab_gg_ .___SOutline_1kuab_gg_{border-color:#59ddaa}.___SInput_1kuab_gg_._state_valid_1kuab_gg_ .___SValue_1kuab_gg_:focus~.___SOutline_1kuab_gg_{border-color:#007c65;box-shadow:0px 0px 0px 3px rgba(0, 159, 129, 0.3)}.___SInput_1kuab_gg_._state_invalid_1kuab_gg_ .___SOutline_1kuab_gg_{border-color:#ffaeb5}.___SInput_1kuab_gg_._state_invalid_1kuab_gg_ .___SValue_1kuab_gg_:focus~.___SOutline_1kuab_gg_{border-color:#d1002f;box-shadow:0px 0px 0px 3px rgba(255, 73, 83, 0.3)}.___SInput_1kuab_gg_._neighborLocation_right_1kuab_gg_ .___SOutline_1kuab_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1kuab_gg_._neighborLocation_both_1kuab_gg_ .___SOutline_1kuab_gg_{border-radius:0;border-left:none}.___SInput_1kuab_gg_._neighborLocation_left_1kuab_gg_ .___SOutline_1kuab_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1kuab_gg_._neighborLocation_right_1kuab_gg_{padding-right:0}.___SValue_1kuab_gg_._neighborLocation_both_1kuab_gg_{padding-left:0;padding-right:0}.___SValue_1kuab_gg_._neighborLocation_left_1kuab_gg_{padding-left:0}"
33
+ ".___SInput_1p9v8_gg_{display:inline-flex;width:100%;align-items:center;position:relative;z-index:0;vertical-align:middle;padding:1px;box-sizing:border-box}.___SInput_1p9v8_gg_ input:-webkit-autofill{border-radius:var(--intergalactic-rounded-medium,6px);-webkit-box-shadow:0 0 0 30px #faffbd inset}.___SInput_1p9v8_gg_ input:-webkit-autofill~.___SOutline_1p9v8_gg_{background-color:#faffbd}.___SValue_1p9v8_gg_{min-width:0;width:100%;height:100%;padding:0;border:none;box-sizing:border-box;color:var(--intergalactic-text-primary,#191b23);font-size:inherit;text-overflow:ellipsis;font-family:inherit;background:transparent}.___SValue_1p9v8_gg_:focus{outline:none}.___SValue_1p9v8_gg_::-moz-placeholder{color:var(--intergalactic-text-placeholder,#a9abb6)}.___SValue_1p9v8_gg_::placeholder{color:var(--intergalactic-text-placeholder,#a9abb6)}.___SValue_1p9v8_gg_:not(:disabled):-moz-read-only~.___SOutline_1p9v8_gg_{background:var(--intergalactic-bg-secondary-neutral,#f4f5f9)}.___SValue_1p9v8_gg_:not(:disabled):read-only~.___SOutline_1p9v8_gg_{background:var(--intergalactic-bg-secondary-neutral,#f4f5f9)}.___SValue_1p9v8_gg_:disabled{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--intergalactic-disabled-opacity,.3)}.___SValue_1p9v8_gg_:disabled~.___SOutline_1p9v8_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___SOutline_1p9v8_gg_{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:var(--intergalactic-rounded-medium,6px);z-index:-1;background:var(--intergalactic-bg-primary-neutral,#fff)}.___SAddon_1p9v8_gg_{display:inline-flex;justify-content:center;align-items:center;flex:0 0 auto;padding:0 var(--intergalactic-spacing-2x,8px);height:100%;color:var(--intergalactic-icon-secondary-neutral,#a9abb6)}.___SAddon_1p9v8_gg_.__interactive_1p9v8_gg_{cursor:pointer}.___SAddon_1p9v8_gg_.__interactive_1p9v8_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SAddon_1p9v8_gg_.__disabled_1p9v8_gg_{opacity:var(--intergalactic-disabled-opacity,.3);cursor:default;pointer-events:none}.___SInput_1p9v8_gg_._size_m_1p9v8_gg_{font-size:var(--intergalactic-fs-200,14px);height:var(--intergalactic-form-control-m,28px)}.___SValue_1p9v8_gg_._size_l_1p9v8_gg_,.___SValue_1p9v8_gg_._size_m_1p9v8_gg_{padding:0 var(--intergalactic-spacing-2x,8px)}.___SInput_1p9v8_gg_._size_l_1p9v8_gg_{font-size:var(--intergalactic-fs-300,16px);height:var(--intergalactic-form-control-l,40px);padding-left:var(--intergalactic-spacing-1x,4px);padding-right:var(--intergalactic-spacing-1x,4px)}.___SInput_1p9v8_gg_.__focused_1p9v8_gg_{z-index:1}.___SInput_1p9v8_gg_._state_normal_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-primary,#c4c7cf)}.___SInput_1p9v8_gg_._state_normal_1p9v8_gg_ .___SValue_1p9v8_gg_:focus~.___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-info-active,#006dca);box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___SInput_1p9v8_gg_._state_valid_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-success,#59ddaa)}.___SInput_1p9v8_gg_._state_valid_1p9v8_gg_ .___SValue_1p9v8_gg_:focus~.___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-success-active,#007c65);box-shadow:var(--intergalactic-keyboard-focus-valid,0 0 0 3px rgba(0,159,129,.3))}.___SInput_1p9v8_gg_._state_invalid_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-danger,#ffaeb5)}.___SInput_1p9v8_gg_._state_invalid_1p9v8_gg_ .___SValue_1p9v8_gg_:focus~.___SOutline_1p9v8_gg_{border-color:var(--intergalactic-border-danger-active,#d1002f);box-shadow:var(--intergalactic-keyboard-focus-invalid,0 0 0 3px rgba(255,73,83,.3))}.___SInput_1p9v8_gg_._neighborLocation_right_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SInput_1p9v8_gg_._neighborLocation_both_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-radius:0;border-left:none}.___SInput_1p9v8_gg_._neighborLocation_left_1p9v8_gg_ .___SOutline_1p9v8_gg_{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}.___SValue_1p9v8_gg_._neighborLocation_right_1p9v8_gg_{padding-right:0}.___SValue_1p9v8_gg_._neighborLocation_both_1p9v8_gg_{padding-left:0;padding-right:0}.___SValue_1p9v8_gg_._neighborLocation_left_1p9v8_gg_{padding-left:0}"
34
34
  /*__inner_css_end__*/
35
- , "1kuab_gg_")
35
+ , "1p9v8_gg_")
36
36
  /*__reshadow_css_end__*/
37
37
  , {
38
- "__SInput": "___SInput_1kuab_gg_",
39
- "__SOutline": "___SOutline_1kuab_gg_",
40
- "__SValue": "___SValue_1kuab_gg_",
41
- "__SAddon": "___SAddon_1kuab_gg_",
42
- "_interactive": "__interactive_1kuab_gg_",
43
- "_disabled": "__disabled_1kuab_gg_",
44
- "_size_m": "_size_m_1kuab_gg_",
45
- "_size_l": "_size_l_1kuab_gg_",
46
- "_focused": "__focused_1kuab_gg_",
47
- "_state_normal": "_state_normal_1kuab_gg_",
48
- "_state_valid": "_state_valid_1kuab_gg_",
49
- "_state_invalid": "_state_invalid_1kuab_gg_",
50
- "_neighborLocation_right": "_neighborLocation_right_1kuab_gg_",
51
- "_neighborLocation_both": "_neighborLocation_both_1kuab_gg_",
52
- "_neighborLocation_left": "_neighborLocation_left_1kuab_gg_"
38
+ "__SInput": "___SInput_1p9v8_gg_",
39
+ "__SOutline": "___SOutline_1p9v8_gg_",
40
+ "__SValue": "___SValue_1p9v8_gg_",
41
+ "__SAddon": "___SAddon_1p9v8_gg_",
42
+ "_interactive": "__interactive_1p9v8_gg_",
43
+ "_disabled": "__disabled_1p9v8_gg_",
44
+ "_size_m": "_size_m_1p9v8_gg_",
45
+ "_size_l": "_size_l_1p9v8_gg_",
46
+ "_focused": "__focused_1p9v8_gg_",
47
+ "_state_normal": "_state_normal_1p9v8_gg_",
48
+ "_state_valid": "_state_valid_1p9v8_gg_",
49
+ "_state_invalid": "_state_invalid_1p9v8_gg_",
50
+ "_neighborLocation_right": "_neighborLocation_right_1p9v8_gg_",
51
+ "_neighborLocation_both": "_neighborLocation_both_1p9v8_gg_",
52
+ "_neighborLocation_left": "_neighborLocation_left_1p9v8_gg_"
53
53
  });
54
54
 
55
55
  var Input = /*#__PURE__*/function (_Component) {
package/lib/es6/index.d.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn } from '@semcore/core';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\n/* utils type */\n\nexport type InputSize = 'm' | 'l';\n\nexport interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {\n /**\n * Sets the input and addons to the disabled state\n * */\n disabled?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n /**\n * Sets the input state\n * @default normal\n */\n state?: 'normal' | 'invalid' | 'valid';\n}\n\nexport interface IInputValueProps\n extends IBoxProps,\n INeighborItemProps,\n IWithAutoFocusEnhanceProps {\n /**\n * Input value\n */\n value?: string;\n /**\n * Default value if `value` property is not provided\n */\n defaultValue?: string;\n /**\n * Handler for changing the value\n */\n onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;\n /**\n * Sets the input to the disabled state\n * */\n disabled?: boolean;\n /**\n * Sets the input to the read-only state\n * */\n readOnly?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n}\n\nexport interface IInputAddonProps extends IBoxProps, INeighborItemProps {\n /**\n * Adds styles for interactive icons\n */\n interactive?: boolean;\n /**\n * Blocks the addon\n * */\n disabled?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n}\n\ninterface IInputCtx {\n getValueProps: PropGetterFn;\n getAddonProps: PropGetterFn;\n}\n\ndeclare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {\n Value: <T>(props: IInputValueProps & T) => ReturnEl;\n Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;\n};\nexport default Input;\n"],"mappings":""}
1
+ {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn } from '@semcore/core';\nimport { IBoxProps } from '@semcore/flex-box';\nimport { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';\nimport { IWithAutoFocusEnhanceProps } from '@semcore/utils/lib/enhances/autoFocusEnhance';\n\n/* utils type */\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;\n};\ntype ReturnEl = React.ReactElement | null;\n/* utils type */\n\nexport type InputSize = 'm' | 'l';\n\nexport interface IInputProps extends IBoxProps, INeighborItemProps, INeighborLocationProps {\n /**\n * Sets the input and addons to the disabled state\n * */\n disabled?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n /**\n * Sets the input state\n * @default normal\n */\n state?: 'normal' | 'invalid' | 'valid';\n}\n\nexport interface IInputValueProps\n extends IBoxProps,\n INeighborItemProps,\n IWithAutoFocusEnhanceProps {\n /**\n * Input value\n */\n value?: string;\n /**\n * Default value if `value` property is not provided\n */\n defaultValue?: string;\n /**\n * Handler for changing the value\n */\n onChange?: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;\n /**\n * Sets the input to the disabled state\n * */\n disabled?: boolean;\n /**\n * Sets the input to the read-only state\n * */\n readOnly?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n}\n\nexport interface IInputAddonProps extends IBoxProps, INeighborItemProps {\n /**\n * Adds styles for interactive icons\n */\n interactive?: boolean;\n /**\n * Blocks the addon\n * */\n disabled?: boolean;\n /**\n * Input size\n * @default m\n */\n size?: InputSize;\n}\n\nexport interface IInputCtx {\n getValueProps: PropGetterFn;\n getAddonProps: PropGetterFn;\n}\n\ndeclare const Input: (<T>(props: CProps<IInputProps & T, IInputCtx>) => ReturnEl) & {\n Value: <T>(props: IInputValueProps & T) => ReturnEl;\n Addon: <T>(props: CProps<IInputAddonProps & T, IInputProps>) => ReturnEl;\n};\nexport default Input;\n"],"mappings":""}
package/lib/es6/style/input.shadow.css CHANGED
@@ -1,5 +1,3 @@
1
- @import '@semcore/utils/style/var.css';
2
-
3
1
  SInput {
4
2
  display: inline-flex;
5
3
  width: 100%;
@@ -7,11 +5,12 @@ SInput {
7
5
  position: relative;
8
6
  z-index: 0;
9
7
  vertical-align: middle;
8
+ /* disable-tokens-validator */
10
9
  padding: 1px;
11
10
  box-sizing: border-box;
12
11
 
13
12
  & input:-webkit-autofill {
14
- border-radius: var(--rounded-m);
13
+ border-radius: var(--intergalactic-rounded-medium, 6px);
15
14
  -webkit-box-shadow: 0 0 0 30px rgb(250, 255, 189) inset;
16
15
 
17
16
  & ~ SOutline {
@@ -28,7 +27,7 @@ SValue {
28
27
  padding: 0;
29
28
  border: none;
30
29
  box-sizing: border-box;
31
- color: var(--gray-800);
30
+ color: var(--intergalactic-text-primary, #191b23);
32
31
  font-size: inherit;
33
32
  text-overflow: ellipsis;
34
33
  font-family: inherit;
@@ -39,19 +38,19 @@ SValue {
39
38
  }
40
39
 
41
40
  &::placeholder {
42
- color: var(--gray-300);
41
+ color: var(--intergalactic-text-placeholder, #a9abb6);
43
42
  }
44
43
 
45
44
  &:not(:disabled):read-only ~ SOutline {
46
- background: var(--gray-50);
45
+ background: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
47
46
  }
48
47
 
49
48
  &:disabled {
50
49
  user-select: none;
51
- opacity: var(--disabled-opacity);
50
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
52
51
 
53
52
  & ~ SOutline {
54
- opacity: var(--disabled-opacity);
53
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
55
54
  cursor: default;
56
55
  pointer-events: none;
57
56
  }
@@ -65,9 +64,9 @@ SOutline {
65
64
  bottom: 0;
66
65
  left: 0;
67
66
  border: 1px solid;
68
- border-radius: var(--rounded-m);
67
+ border-radius: var(--intergalactic-rounded-medium, 6px);
69
68
  z-index: -1;
70
- background: #fff;
69
+ background: var(--intergalactic-bg-primary-neutral, #ffffff);
71
70
  }
72
71
 
73
72
  SAddon {
@@ -75,40 +74,40 @@ SAddon {
75
74
  justify-content: center;
76
75
  align-items: center;
77
76
  flex: 0 0 auto;
78
- padding: 0 8px;
77
+ padding: 0 var(--intergalactic-spacing-2x, 8px);
79
78
  height: 100%;
80
- color: var(--gray-300);
79
+ color: var(--intergalactic-icon-secondary-neutral, #a9abb6);
81
80
  }
82
81
 
83
82
  SAddon[interactive] {
84
83
  cursor: pointer;
85
84
 
86
85
  &:hover {
87
- color: var(--gray-400);
86
+ color: var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b);
88
87
  }
89
88
  }
90
89
 
91
90
  SAddon[disabled] {
92
- opacity: var(--disabled-opacity);
91
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
93
92
  cursor: default;
94
93
  pointer-events: none;
95
94
  }
96
95
 
97
96
  SInput[size='m'] {
98
- font-size: var(--fs-200);
99
- height: var(--form-control-m);
97
+ font-size: var(--intergalactic-fs-200, 14px);
98
+ height: var(--intergalactic-form-control-m, 28px);
100
99
  }
101
100
 
102
101
  SValue[size='m'],
103
102
  SValue[size='l'] {
104
- padding: 0 8px;
103
+ padding: 0 var(--intergalactic-spacing-2x, 8px);
105
104
  }
106
105
 
107
106
  SInput[size='l'] {
108
- font-size: var(--fs-300);
109
- height: var(--form-control-l);
110
- padding-left: 4px;
111
- padding-right: 4px;
107
+ font-size: var(--intergalactic-fs-300, 16px);
108
+ height: var(--intergalactic-form-control-l, 40px);
109
+ padding-left: var(--intergalactic-spacing-1x, 4px);
110
+ padding-right: var(--intergalactic-spacing-1x, 4px);
112
111
  }
113
112
 
114
113
  SInput[focused] {
@@ -117,32 +116,32 @@ SInput[focused] {
117
116
 
118
117
  SInput[state='normal'] {
119
118
  & SOutline {
120
- border-color: var(--gray-200);
119
+ border-color: var(--intergalactic-border-primary, #c4c7cf);
121
120
  }
122
121
 
123
122
  & SValue:focus ~ SOutline {
124
- border-color: var(--blue-500);
125
- box-shadow: var(--keyboard-focus);
123
+ border-color: var(--intergalactic-border-info-active, #006dca);
124
+ box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
126
125
  }
127
126
  }
128
127
  SInput[state='valid'] {
129
128
  & SOutline {
130
- border-color: var(--green-200);
129
+ border-color: var(--intergalactic-border-success, #59ddaa);
131
130
  }
132
131
 
133
132
  & SValue:focus ~ SOutline {
134
- border-color: var(--green-500);
135
- box-shadow: var(--keyboard-focus-valid);
133
+ border-color: var(--intergalactic-border-success-active, #007c65);
134
+ box-shadow: var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.3));
136
135
  }
137
136
  }
138
137
  SInput[state='invalid'] {
139
138
  & SOutline {
140
- border-color: var(--red-200);
139
+ border-color: var(--intergalactic-border-danger, #ffaeb5);
141
140
  }
142
141
 
143
142
  & SValue:focus ~ SOutline {
144
- border-color: var(--red-500);
145
- box-shadow: var(--keyboard-focus-invalid);
143
+ border-color: var(--intergalactic-border-danger-active, #d1002f);
144
+ box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.3));
146
145
  }
147
146
  }
148
147
 
package/lib/types/index.d.ts CHANGED
@@ -77,7 +77,7 @@ export interface IInputAddonProps extends IBoxProps, INeighborItemProps {
77
77
  size?: InputSize;
78
78
  }
79
79
 
80
- interface IInputCtx {
80
+ export interface IInputCtx {
81
81
  getValueProps: PropGetterFn;
82
82
  getAddonProps: PropGetterFn;
83
83
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/input",
3
3
  "description": "Semrush Input Component",
4
- "version": "3.4.1",
4
+ "version": "3.5.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",