@hh.ru/magritte-ui-pincode-input 2.0.7 → 2.0.8

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 (3) hide show
  1. package/PincodeInput.js +1 -1
  2. package/index.css +75 -102
  3. package/package.json +4 -4
package/PincodeInput.js CHANGED
@@ -7,7 +7,7 @@ import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
7
7
  import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
8
8
  import { useOTP } from './useOTP.js';
9
9
 
10
- var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-0-7","pincodeInput":"magritte-pincode-input___RpWyq_2-0-7","medium":"magritte-medium___wfRSc_2-0-7","placeholder":"magritte-placeholder___10kQ0_2-0-7","focus":"magritte-focus___IuhXb_2-0-7","invalid":"magritte-invalid___hB8h2_2-0-7","focus-visible":"magritte-focus-visible___BN1eD_2-0-7","focusVisible":"magritte-focus-visible___BN1eD_2-0-7","digit-box-container":"magritte-digit-box-container___BqMWw_2-0-7","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-0-7","digit-box":"magritte-digit-box___6J0Q2_2-0-7","digitBox":"magritte-digit-box___6J0Q2_2-0-7","digits-input":"magritte-digits-input___4QeLj_2-0-7","digitsInput":"magritte-digits-input___4QeLj_2-0-7","caret-left":"magritte-caret-left___iZMuA_2-0-7","caretLeft":"magritte-caret-left___iZMuA_2-0-7","caret-right":"magritte-caret-right___u8wNk_2-0-7","caretRight":"magritte-caret-right___u8wNk_2-0-7","caret-blink":"magritte-caret-blink___-bhg7_2-0-7","caretBlink":"magritte-caret-blink___-bhg7_2-0-7","value-container":"magritte-value-container___9JR3e_2-0-7","valueContainer":"magritte-value-container___9JR3e_2-0-7","ghost-value":"magritte-ghost-value___jPQwY_2-0-7","ghostValue":"magritte-ghost-value___jPQwY_2-0-7"};
10
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-0-8","pincodeInput":"magritte-pincode-input___RpWyq_2-0-8","medium":"magritte-medium___wfRSc_2-0-8","placeholder":"magritte-placeholder___10kQ0_2-0-8","focus":"magritte-focus___IuhXb_2-0-8","invalid":"magritte-invalid___hB8h2_2-0-8","focus-visible":"magritte-focus-visible___BN1eD_2-0-8","focusVisible":"magritte-focus-visible___BN1eD_2-0-8","digit-box-container":"magritte-digit-box-container___BqMWw_2-0-8","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-0-8","digit-box":"magritte-digit-box___6J0Q2_2-0-8","digitBox":"magritte-digit-box___6J0Q2_2-0-8","digits-input":"magritte-digits-input___4QeLj_2-0-8","digitsInput":"magritte-digits-input___4QeLj_2-0-8","caret-left":"magritte-caret-left___iZMuA_2-0-8","caretLeft":"magritte-caret-left___iZMuA_2-0-8","caret-right":"magritte-caret-right___u8wNk_2-0-8","caretRight":"magritte-caret-right___u8wNk_2-0-8","caret-blink":"magritte-caret-blink___-bhg7_2-0-8","caretBlink":"magritte-caret-blink___-bhg7_2-0-8","value-container":"magritte-value-container___9JR3e_2-0-8","valueContainer":"magritte-value-container___9JR3e_2-0-8","ghost-value":"magritte-ghost-value___jPQwY_2-0-8","ghostValue":"magritte-ghost-value___jPQwY_2-0-8"};
11
11
 
12
12
  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
13
13
  const PincodeInput = forwardRef(({ digitsCount: _digitsCount = null, size = 'large', invalid = false, name, onFocus, onBlur, onChange, description, errorMessage, credentialsRequestId = -1, onOTPCredentialsRequestFail, 'data-qa': dataQa = 'magritte-pincode-input', }, ref) => {
package/index.css CHANGED
@@ -1,123 +1,96 @@
1
1
  :root{
2
- --magritte-color-text-primary-v23-2-1:#000000;
3
- --magritte-color-component-input-stroke-state-field-hovered-v23-2-1:#CCD5DF;
4
- --magritte-color-component-input-stroke-state-field-focused-v23-2-1:#0070ff;
5
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-1:#0070ff7a;
6
- --magritte-color-component-input-stroke-state-field-invalid-v23-2-1:#ff4d3a;
7
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-1:#ff4d3a7a;
8
- --magritte-color-component-input-background-field-v23-2-1:#ffffff;
9
- --magritte-color-component-input-background-state-field-hovered-v23-2-1:#ffffff;
10
- --magritte-color-component-input-background-state-field-focused-v23-2-1:#ffffff;
11
- --magritte-color-component-input-background-state-field-invalid-v23-2-1:#ffffff;
12
- --magritte-color-component-input-stroke-field-v23-2-1:#DCE3EB;
13
- --magritte-color-component-input-text-state-content-focused-v23-2-1:#000000;
14
- --magritte-color-component-input-text-state-placeholder-hovered-v23-2-1:#768694;
15
- --magritte-color-component-input-text-state-placeholder-focused-v23-2-1:#AABBCA;
16
- --magritte-color-component-input-text-state-placeholder-invalid-v23-2-1:#AABBCA;
17
- --magritte-color-component-input-text-placeholder-v23-2-1:#AABBCA;
18
- }
19
-
20
- :root{
21
- --magritte-font-families-body-v23-2-1:hh sans;
22
- --magritte-semantic-border-width-default-v23-2-1:1px;
23
- --magritte-semantic-border-width-focused-v23-2-1:2px;
24
- --magritte-static-border-radius-300-v23-2-1:12px;
25
- --magritte-static-border-radius-450-v23-2-1:18px;
2
+ --magritte-color-text-primary-v23-2-2:#000000;
3
+ --magritte-color-component-input-stroke-state-field-hovered-v23-2-2:#CCD5DF;
4
+ --magritte-color-component-input-stroke-state-field-focused-v23-2-2:#0070ff;
5
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-2:#0070ff7a;
6
+ --magritte-color-component-input-stroke-state-field-invalid-v23-2-2:#ff4d3a;
7
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-2:#ff4d3a7a;
8
+ --magritte-color-component-input-background-field-v23-2-2:#ffffff;
9
+ --magritte-color-component-input-background-state-field-hovered-v23-2-2:#ffffff;
10
+ --magritte-color-component-input-background-state-field-focused-v23-2-2:#ffffff;
11
+ --magritte-color-component-input-background-state-field-invalid-v23-2-2:#ffffff;
12
+ --magritte-color-component-input-stroke-field-v23-2-2:#DCE3EB;
13
+ --magritte-color-component-input-text-state-content-focused-v23-2-2:#000000;
14
+ --magritte-color-component-input-text-state-placeholder-hovered-v23-2-2:#768694;
15
+ --magritte-color-component-input-text-state-placeholder-focused-v23-2-2:#AABBCA;
16
+ --magritte-color-component-input-text-state-placeholder-invalid-v23-2-2:#AABBCA;
17
+ --magritte-color-component-input-text-placeholder-v23-2-2:#AABBCA;
26
18
  }
27
19
 
28
20
  .magritte-night-theme{
29
- --magritte-color-text-primary-v23-2-1:#ffffff;
30
- --magritte-color-component-input-stroke-state-field-hovered-v23-2-1:#3B3B3B;
31
- --magritte-color-component-input-stroke-state-field-focused-v23-2-1:#0070ff;
32
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-1:#0070ff7a;
33
- --magritte-color-component-input-stroke-state-field-invalid-v23-2-1:#ff4d3a;
34
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-1:#ff4d3a7a;
35
- --magritte-color-component-input-background-field-v23-2-1:#111;
36
- --magritte-color-component-input-background-state-field-hovered-v23-2-1:#111;
37
- --magritte-color-component-input-background-state-field-focused-v23-2-1:#111;
38
- --magritte-color-component-input-background-state-field-invalid-v23-2-1:#111;
39
- --magritte-color-component-input-stroke-field-v23-2-1:#303030;
40
- --magritte-color-component-input-text-placeholder-v23-2-1:#535353;
41
- --magritte-color-component-input-text-state-content-focused-v23-2-1:#ffffff;
42
- --magritte-color-component-input-text-state-placeholder-hovered-v23-2-1:#5E5E5E;
43
- --magritte-color-component-input-text-state-placeholder-focused-v23-2-1:#535353;
44
- --magritte-color-component-input-text-state-placeholder-invalid-v23-2-1:#535353;
21
+ --magritte-color-text-primary-v23-2-2:#ffffff;
22
+ --magritte-color-component-input-stroke-state-field-hovered-v23-2-2:#3B3B3B;
23
+ --magritte-color-component-input-background-field-v23-2-2:#111;
24
+ --magritte-color-component-input-background-state-field-hovered-v23-2-2:#111;
25
+ --magritte-color-component-input-background-state-field-focused-v23-2-2:#111;
26
+ --magritte-color-component-input-background-state-field-invalid-v23-2-2:#111;
27
+ --magritte-color-component-input-stroke-field-v23-2-2:#303030;
28
+ --magritte-color-component-input-text-placeholder-v23-2-2:#535353;
29
+ --magritte-color-component-input-text-state-content-focused-v23-2-2:#ffffff;
30
+ --magritte-color-component-input-text-state-placeholder-hovered-v23-2-2:#5E5E5E;
31
+ --magritte-color-component-input-text-state-placeholder-focused-v23-2-2:#535353;
32
+ --magritte-color-component-input-text-state-placeholder-invalid-v23-2-2:#535353;
45
33
  }
46
34
 
47
35
  .magritte-zp-day-theme{
48
- --magritte-color-text-primary-v23-2-1:#000000;
49
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-1:#0070ff7a;
50
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-1:#ff4d3a7a;
51
- --magritte-color-component-input-stroke-state-field-hovered-v23-2-1:#CCD5DF;
52
- --magritte-color-component-input-stroke-state-field-focused-v23-2-1:#7195AF;
53
- --magritte-color-component-input-stroke-state-field-invalid-v23-2-1:#ff4d3a;
54
- --magritte-color-component-input-background-field-v23-2-1:#ffffff;
55
- --magritte-color-component-input-background-state-field-hovered-v23-2-1:#ffffff;
56
- --magritte-color-component-input-background-state-field-focused-v23-2-1:#ffffff;
57
- --magritte-color-component-input-background-state-field-invalid-v23-2-1:#ffffff;
58
- --magritte-color-component-input-stroke-field-v23-2-1:#DCE3EB;
59
- --magritte-color-component-input-text-placeholder-v23-2-1:#AABBCA;
60
- --magritte-color-component-input-text-state-content-focused-v23-2-1:#000000;
61
- --magritte-color-component-input-text-state-placeholder-hovered-v23-2-1:#768694;
62
- --magritte-color-component-input-text-state-placeholder-focused-v23-2-1:#AABBCA;
63
- --magritte-color-component-input-text-state-placeholder-invalid-v23-2-1:#AABBCA;
64
- }
65
- .magritte-pincode-input___RpWyq_2-0-7{
36
+ --magritte-color-component-input-stroke-state-field-focused-v23-2-2:#7195AF;
37
+ }
38
+ .magritte-pincode-input___RpWyq_2-0-8{
66
39
  --magritte-pincode-input-padding-horizontal:20px;
67
40
  --magritte-pincode-input-padding-vertical:8px;
68
41
  --magritte-pincode-input-gap:6px;
69
42
  --magritte-digit-box-width:calc((100% - (var(--magritte-pincode-input-gap) * (var(--magritte-pincode-digits-count) - 1)) - (var(--magritte-pincode-input-padding-horizontal) * 2)) / var(--magritte-pincode-digits-count));
70
43
  box-sizing:border-box;
71
44
  height:88px;
72
- box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v23-2-1) var(--magritte-color-component-input-stroke-field-v23-2-1);
73
- border-radius:var(--magritte-static-border-radius-450-v23-2-1);
74
- background-color:var(--magritte-color-component-input-background-field-v23-2-1);
45
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v23-2-2);
46
+ border-radius:18px;
47
+ background-color:var(--magritte-color-component-input-background-field-v23-2-2);
75
48
  position:relative;
76
49
  overflow:clip;
77
50
  cursor:text;
78
- font-family:var(--magritte-font-families-body-v23-2-1);
51
+ font-family:hh sans;
79
52
  font-size:32px;
80
53
  font-style:normal;
81
54
  font-weight:normal;
82
55
  line-height:40px;
83
- color:var(--magritte-color-component-input-text-state-content-focused-v23-2-1);
56
+ color:var(--magritte-color-component-input-text-state-content-focused-v23-2-2);
84
57
  }
85
- .magritte-pincode-input___RpWyq_2-0-7.magritte-medium___wfRSc_2-0-7{
58
+ .magritte-pincode-input___RpWyq_2-0-8.magritte-medium___wfRSc_2-0-8{
86
59
  font-size:28px;
87
60
  --magritte-pincode-input-padding-horizontal:16px;
88
61
  --magritte-pincode-input-padding-vertical:6px;
89
62
  --magritte-pincode-input-gap:4px;
90
- border-radius:var(--magritte-static-border-radius-300-v23-2-1);
63
+ border-radius:12px;
91
64
  height:76px;
92
65
  }
93
- .magritte-pincode-input___RpWyq_2-0-7:hover{
94
- box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v23-2-1) var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-1);
95
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-1);
66
+ .magritte-pincode-input___RpWyq_2-0-8:hover{
67
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v23-2-2);
68
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v23-2-2);
96
69
  }
97
- .magritte-pincode-input___RpWyq_2-0-7:hover .magritte-placeholder___10kQ0_2-0-7{
98
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-1);
70
+ .magritte-pincode-input___RpWyq_2-0-8:hover .magritte-placeholder___10kQ0_2-0-8{
71
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v23-2-2);
99
72
  }
100
- .magritte-pincode-input___RpWyq_2-0-7.magritte-focus___IuhXb_2-0-7{
101
- box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-focused-v23-2-1) var(--magritte-color-component-input-stroke-state-field-focused-v23-2-1);
102
- background-color:var(--magritte-color-component-input-background-state-field-focused-v23-2-1);
73
+ .magritte-pincode-input___RpWyq_2-0-8.magritte-focus___IuhXb_2-0-8{
74
+ box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v23-2-2);
75
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v23-2-2);
103
76
  }
104
- .magritte-pincode-input___RpWyq_2-0-7.magritte-focus___IuhXb_2-0-7 .magritte-placeholder___10kQ0_2-0-7{
105
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v23-2-1);
77
+ .magritte-pincode-input___RpWyq_2-0-8.magritte-focus___IuhXb_2-0-8 .magritte-placeholder___10kQ0_2-0-8{
78
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v23-2-2);
106
79
  }
107
- .magritte-pincode-input___RpWyq_2-0-7.magritte-invalid___hB8h2_2-0-7{
108
- box-shadow:inset 0 0 0 var(--magritte-semantic-border-width-default-v23-2-1) var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-1);
109
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-1);
80
+ .magritte-pincode-input___RpWyq_2-0-8.magritte-invalid___hB8h2_2-0-8{
81
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v23-2-2);
82
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v23-2-2);
110
83
  }
111
- .magritte-pincode-input___RpWyq_2-0-7.magritte-invalid___hB8h2_2-0-7 .magritte-placeholder___10kQ0_2-0-7{
112
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v23-2-1);
84
+ .magritte-pincode-input___RpWyq_2-0-8.magritte-invalid___hB8h2_2-0-8 .magritte-placeholder___10kQ0_2-0-8{
85
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v23-2-2);
113
86
  }
114
- .magritte-pincode-input___RpWyq_2-0-7.magritte-focus-visible___BN1eD_2-0-7{
115
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-1) solid 4px;
87
+ .magritte-pincode-input___RpWyq_2-0-8.magritte-focus-visible___BN1eD_2-0-8{
88
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v23-2-2) solid 4px;
116
89
  }
117
- .magritte-pincode-input___RpWyq_2-0-7.magritte-focus-visible___BN1eD_2-0-7.magritte-invalid___hB8h2_2-0-7{
118
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-1);
90
+ .magritte-pincode-input___RpWyq_2-0-8.magritte-focus-visible___BN1eD_2-0-8.magritte-invalid___hB8h2_2-0-8{
91
+ outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v23-2-2);
119
92
  }
120
- .magritte-digit-box-container___BqMWw_2-0-7{
93
+ .magritte-digit-box-container___BqMWw_2-0-8{
121
94
  display:flex;
122
95
  gap:var(--magritte-pincode-input-gap);
123
96
  position:absolute;
@@ -128,7 +101,7 @@
128
101
  pointer-events:none;
129
102
  z-index:0;
130
103
  }
131
- .magritte-digit-box___6J0Q2_2-0-7{
104
+ .magritte-digit-box___6J0Q2_2-0-8{
132
105
  flex:0 0 var(--magritte-digit-box-width);
133
106
  pointer-events:auto;
134
107
  display:flex;
@@ -136,13 +109,13 @@
136
109
  justify-content:center;
137
110
  user-select:none;
138
111
  }
139
- .magritte-digit-box___6J0Q2_2-0-7::selection{
112
+ .magritte-digit-box___6J0Q2_2-0-8::selection{
140
113
  background-color:transparent;
141
114
  }
142
- .magritte-digit-box___6J0Q2_2-0-7::-moz-selection{
115
+ .magritte-digit-box___6J0Q2_2-0-8::-moz-selection{
143
116
  background-color:transparent;
144
117
  }
145
- .magritte-digits-input___4QeLj_2-0-7{
118
+ .magritte-digits-input___4QeLj_2-0-8{
146
119
  display:block;
147
120
  position:absolute;
148
121
  top:0;
@@ -160,42 +133,42 @@
160
133
  appearance:none;
161
134
  caret-color:transparent;
162
135
  }
163
- .magritte-digits-input___4QeLj_2-0-7::selection{
136
+ .magritte-digits-input___4QeLj_2-0-8::selection{
164
137
  background-color:transparent;
165
138
  appearance:none;
166
139
  }
167
- .magritte-digits-input___4QeLj_2-0-7::-moz-selection{
140
+ .magritte-digits-input___4QeLj_2-0-8::-moz-selection{
168
141
  background-color:transparent;
169
142
  appearance:none;
170
143
  }
171
- .magritte-caret-left___iZMuA_2-0-7::before,
172
- .magritte-caret-right___u8wNk_2-0-7::after{
144
+ .magritte-caret-left___iZMuA_2-0-8::before,
145
+ .magritte-caret-right___u8wNk_2-0-8::after{
173
146
  content:'';
174
147
  position:absolute;
175
148
  top:50%;
176
149
  transform:translateY(-50%);
177
150
  block-size:1em;
178
- border-left:1px solid var(--magritte-color-text-primary-v23-2-1);
179
- animation:magritte-caret-blink___-bhg7_2-0-7 1s steps(1) infinite;
151
+ border-left:1px solid var(--magritte-color-text-primary-v23-2-2);
152
+ animation:magritte-caret-blink___-bhg7_2-0-8 1s steps(1) infinite;
180
153
  }
181
- .magritte-caret-left___iZMuA_2-0-7::before{
154
+ .magritte-caret-left___iZMuA_2-0-8::before{
182
155
  left:-1px;
183
156
  }
184
- .magritte-caret-right___u8wNk_2-0-7::after{
157
+ .magritte-caret-right___u8wNk_2-0-8::after{
185
158
  right:-1px;
186
159
  }
187
- .magritte-placeholder___10kQ0_2-0-7{
188
- color:var(--magritte-color-component-input-text-placeholder-v23-2-1);
160
+ .magritte-placeholder___10kQ0_2-0-8{
161
+ color:var(--magritte-color-component-input-text-placeholder-v23-2-2);
189
162
  }
190
- .magritte-value-container___9JR3e_2-0-7{
163
+ .magritte-value-container___9JR3e_2-0-8{
191
164
  pointer-events:none;
192
165
  position:relative;
193
166
  }
194
- .magritte-ghost-value___jPQwY_2-0-7{
167
+ .magritte-ghost-value___jPQwY_2-0-8{
195
168
  display:inline-block;
196
169
  visibility:hidden;
197
170
  }
198
- @keyframes magritte-caret-blink___-bhg7_2-0-7{
171
+ @keyframes magritte-caret-blink___-bhg7_2-0-8{
199
172
  50%{
200
173
  opacity:0;
201
174
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-pincode-input",
3
- "version": "2.0.7",
3
+ "version": "2.0.8",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -24,13 +24,13 @@
24
24
  "dependencies": {
25
25
  "@hh.ru/magritte-common-keyboard": "4.1.3",
26
26
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.9",
27
- "@hh.ru/magritte-design-tokens": "23.2.1",
28
- "@hh.ru/magritte-ui-form-helper": "2.0.6",
27
+ "@hh.ru/magritte-design-tokens": "23.2.2",
28
+ "@hh.ru/magritte-ui-form-helper": "2.0.7",
29
29
  "@hh.ru/magritte-ui-mock-component": "1.1.5"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "classnames": ">=2.3.2",
33
33
  "react": ">=18.2.0"
34
34
  },
35
- "gitHead": "18a4c9f53b8572077ce0fba28266865c1b619cee"
35
+ "gitHead": "b2ab15b73592666625ff3b84e10f3cc1bcee9cbc"
36
36
  }