@hh.ru/magritte-ui-pincode-input 2.0.15 → 2.0.17

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 +71 -71
  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-15","pincodeInput":"magritte-pincode-input___RpWyq_2-0-15","medium":"magritte-medium___wfRSc_2-0-15","placeholder":"magritte-placeholder___10kQ0_2-0-15","focus":"magritte-focus___IuhXb_2-0-15","invalid":"magritte-invalid___hB8h2_2-0-15","focus-visible":"magritte-focus-visible___BN1eD_2-0-15","focusVisible":"magritte-focus-visible___BN1eD_2-0-15","digit-box-container":"magritte-digit-box-container___BqMWw_2-0-15","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-0-15","digit-box":"magritte-digit-box___6J0Q2_2-0-15","digitBox":"magritte-digit-box___6J0Q2_2-0-15","digits-input":"magritte-digits-input___4QeLj_2-0-15","digitsInput":"magritte-digits-input___4QeLj_2-0-15","caret-left":"magritte-caret-left___iZMuA_2-0-15","caretLeft":"magritte-caret-left___iZMuA_2-0-15","caret-right":"magritte-caret-right___u8wNk_2-0-15","caretRight":"magritte-caret-right___u8wNk_2-0-15","caret-blink":"magritte-caret-blink___-bhg7_2-0-15","caretBlink":"magritte-caret-blink___-bhg7_2-0-15","value-container":"magritte-value-container___9JR3e_2-0-15","valueContainer":"magritte-value-container___9JR3e_2-0-15","ghost-value":"magritte-ghost-value___jPQwY_2-0-15","ghostValue":"magritte-ghost-value___jPQwY_2-0-15"};
10
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-0-17","pincodeInput":"magritte-pincode-input___RpWyq_2-0-17","medium":"magritte-medium___wfRSc_2-0-17","placeholder":"magritte-placeholder___10kQ0_2-0-17","focus":"magritte-focus___IuhXb_2-0-17","invalid":"magritte-invalid___hB8h2_2-0-17","focus-visible":"magritte-focus-visible___BN1eD_2-0-17","focusVisible":"magritte-focus-visible___BN1eD_2-0-17","digit-box-container":"magritte-digit-box-container___BqMWw_2-0-17","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-0-17","digit-box":"magritte-digit-box___6J0Q2_2-0-17","digitBox":"magritte-digit-box___6J0Q2_2-0-17","digits-input":"magritte-digits-input___4QeLj_2-0-17","digitsInput":"magritte-digits-input___4QeLj_2-0-17","caret-left":"magritte-caret-left___iZMuA_2-0-17","caretLeft":"magritte-caret-left___iZMuA_2-0-17","caret-right":"magritte-caret-right___u8wNk_2-0-17","caretRight":"magritte-caret-right___u8wNk_2-0-17","caret-blink":"magritte-caret-blink___-bhg7_2-0-17","caretBlink":"magritte-caret-blink___-bhg7_2-0-17","value-container":"magritte-value-container___9JR3e_2-0-17","valueContainer":"magritte-value-container___9JR3e_2-0-17","ghost-value":"magritte-ghost-value___jPQwY_2-0-17","ghostValue":"magritte-ghost-value___jPQwY_2-0-17"};
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,50 +1,50 @@
1
1
  :root{
2
- --magritte-color-text-primary-v24-0-2:#000000;
3
- --magritte-color-component-input-stroke-state-field-hovered-v24-0-2:#CCD5DF;
4
- --magritte-color-component-input-stroke-state-field-focused-v24-0-2:#0070ff;
5
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v24-0-2:#0070ff7a;
6
- --magritte-color-component-input-stroke-state-field-invalid-v24-0-2:#ff4d3a;
7
- --magritte-color-component-input-stroke-state-negative-focused-accessible-v24-0-2:#ff4d3a7a;
8
- --magritte-color-component-input-background-field-v24-0-2:#ffffff;
9
- --magritte-color-component-input-background-state-field-hovered-v24-0-2:#ffffff;
10
- --magritte-color-component-input-background-state-field-focused-v24-0-2:#ffffff;
11
- --magritte-color-component-input-background-state-field-invalid-v24-0-2:#ffffff;
12
- --magritte-color-component-input-stroke-field-v24-0-2:#DCE3EB;
13
- --magritte-color-component-input-text-state-content-focused-v24-0-2:#000000;
14
- --magritte-color-component-input-text-state-placeholder-hovered-v24-0-2:#768694;
15
- --magritte-color-component-input-text-state-placeholder-focused-v24-0-2:#AABBCA;
16
- --magritte-color-component-input-text-state-placeholder-invalid-v24-0-2:#AABBCA;
17
- --magritte-color-component-input-text-placeholder-v24-0-2:#AABBCA;
2
+ --magritte-color-text-primary-v24-1-0:#000000;
3
+ --magritte-color-component-input-stroke-state-field-hovered-v24-1-0:#CCD5DF;
4
+ --magritte-color-component-input-stroke-state-field-focused-v24-1-0:#0070ff;
5
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v24-1-0:#0070ff7a;
6
+ --magritte-color-component-input-stroke-state-field-invalid-v24-1-0:#ff4d3a;
7
+ --magritte-color-component-input-stroke-state-negative-focused-accessible-v24-1-0:#ff4d3a7a;
8
+ --magritte-color-component-input-background-field-v24-1-0:#ffffff;
9
+ --magritte-color-component-input-background-state-field-hovered-v24-1-0:#ffffff;
10
+ --magritte-color-component-input-background-state-field-focused-v24-1-0:#ffffff;
11
+ --magritte-color-component-input-background-state-field-invalid-v24-1-0:#ffffff;
12
+ --magritte-color-component-input-stroke-field-v24-1-0:#DCE3EB;
13
+ --magritte-color-component-input-text-state-content-focused-v24-1-0:#000000;
14
+ --magritte-color-component-input-text-state-placeholder-hovered-v24-1-0:#768694;
15
+ --magritte-color-component-input-text-state-placeholder-focused-v24-1-0:#AABBCA;
16
+ --magritte-color-component-input-text-state-placeholder-invalid-v24-1-0:#AABBCA;
17
+ --magritte-color-component-input-text-placeholder-v24-1-0:#AABBCA;
18
18
  }
19
19
 
20
20
  .magritte-night-theme{
21
- --magritte-color-text-primary-v24-0-2:#ffffff;
22
- --magritte-color-component-input-stroke-state-field-hovered-v24-0-2:#3B3B3B;
23
- --magritte-color-component-input-background-field-v24-0-2:#111;
24
- --magritte-color-component-input-background-state-field-hovered-v24-0-2:#111;
25
- --magritte-color-component-input-background-state-field-focused-v24-0-2:#111;
26
- --magritte-color-component-input-background-state-field-invalid-v24-0-2:#111;
27
- --magritte-color-component-input-stroke-field-v24-0-2:#303030;
28
- --magritte-color-component-input-text-placeholder-v24-0-2:#535353;
29
- --magritte-color-component-input-text-state-content-focused-v24-0-2:#ffffff;
30
- --magritte-color-component-input-text-state-placeholder-hovered-v24-0-2:#5E5E5E;
31
- --magritte-color-component-input-text-state-placeholder-focused-v24-0-2:#535353;
32
- --magritte-color-component-input-text-state-placeholder-invalid-v24-0-2:#535353;
21
+ --magritte-color-text-primary-v24-1-0:#ffffff;
22
+ --magritte-color-component-input-stroke-state-field-hovered-v24-1-0:#3B3B3B;
23
+ --magritte-color-component-input-background-field-v24-1-0:#111;
24
+ --magritte-color-component-input-background-state-field-hovered-v24-1-0:#111;
25
+ --magritte-color-component-input-background-state-field-focused-v24-1-0:#111;
26
+ --magritte-color-component-input-background-state-field-invalid-v24-1-0:#111;
27
+ --magritte-color-component-input-stroke-field-v24-1-0:#303030;
28
+ --magritte-color-component-input-text-placeholder-v24-1-0:#535353;
29
+ --magritte-color-component-input-text-state-content-focused-v24-1-0:#ffffff;
30
+ --magritte-color-component-input-text-state-placeholder-hovered-v24-1-0:#5E5E5E;
31
+ --magritte-color-component-input-text-state-placeholder-focused-v24-1-0:#535353;
32
+ --magritte-color-component-input-text-state-placeholder-invalid-v24-1-0:#535353;
33
33
  }
34
34
 
35
35
  .magritte-zp-day-theme{
36
- --magritte-color-component-input-stroke-state-field-focused-v24-0-2:#7195AF;
36
+ --magritte-color-component-input-stroke-state-field-focused-v24-1-0:#7195AF;
37
37
  }
38
- .magritte-pincode-input___RpWyq_2-0-15{
38
+ .magritte-pincode-input___RpWyq_2-0-17{
39
39
  --magritte-pincode-input-padding-horizontal:20px;
40
40
  --magritte-pincode-input-padding-vertical:8px;
41
41
  --magritte-pincode-input-gap:6px;
42
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));
43
43
  box-sizing:border-box;
44
44
  height:88px;
45
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-0-2);
45
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-field-v24-1-0);
46
46
  border-radius:18px;
47
- background-color:var(--magritte-color-component-input-background-field-v24-0-2);
47
+ background-color:var(--magritte-color-component-input-background-field-v24-1-0);
48
48
  position:relative;
49
49
  overflow:clip;
50
50
  cursor:text;
@@ -53,9 +53,9 @@
53
53
  font-style:normal;
54
54
  font-weight:normal;
55
55
  line-height:40px;
56
- color:var(--magritte-color-component-input-text-state-content-focused-v24-0-2);
56
+ color:var(--magritte-color-component-input-text-state-content-focused-v24-1-0);
57
57
  }
58
- .magritte-pincode-input___RpWyq_2-0-15.magritte-medium___wfRSc_2-0-15{
58
+ .magritte-pincode-input___RpWyq_2-0-17.magritte-medium___wfRSc_2-0-17{
59
59
  font-size:28px;
60
60
  --magritte-pincode-input-padding-horizontal:16px;
61
61
  --magritte-pincode-input-padding-vertical:6px;
@@ -63,34 +63,34 @@
63
63
  border-radius:12px;
64
64
  height:76px;
65
65
  }
66
- .magritte-pincode-input___RpWyq_2-0-15:hover{
67
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-0-2);
68
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-0-2);
66
+ .magritte-pincode-input___RpWyq_2-0-17:hover{
67
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v24-1-0);
68
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v24-1-0);
69
69
  }
70
- .magritte-pincode-input___RpWyq_2-0-15:hover .magritte-placeholder___10kQ0_2-0-15{
71
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-0-2);
70
+ .magritte-pincode-input___RpWyq_2-0-17:hover .magritte-placeholder___10kQ0_2-0-17{
71
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-1-0);
72
72
  }
73
- .magritte-pincode-input___RpWyq_2-0-15.magritte-focus___IuhXb_2-0-15{
74
- box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v24-0-2);
75
- background-color:var(--magritte-color-component-input-background-state-field-focused-v24-0-2);
73
+ .magritte-pincode-input___RpWyq_2-0-17.magritte-focus___IuhXb_2-0-17{
74
+ box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v24-1-0);
75
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v24-1-0);
76
76
  }
77
- .magritte-pincode-input___RpWyq_2-0-15.magritte-focus___IuhXb_2-0-15 .magritte-placeholder___10kQ0_2-0-15{
78
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-0-2);
77
+ .magritte-pincode-input___RpWyq_2-0-17.magritte-focus___IuhXb_2-0-17 .magritte-placeholder___10kQ0_2-0-17{
78
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-1-0);
79
79
  }
80
- .magritte-pincode-input___RpWyq_2-0-15.magritte-invalid___hB8h2_2-0-15{
81
- box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v24-0-2);
82
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v24-0-2);
80
+ .magritte-pincode-input___RpWyq_2-0-17.magritte-invalid___hB8h2_2-0-17{
81
+ box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v24-1-0);
82
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v24-1-0);
83
83
  }
84
- .magritte-pincode-input___RpWyq_2-0-15.magritte-invalid___hB8h2_2-0-15 .magritte-placeholder___10kQ0_2-0-15{
85
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-0-2);
84
+ .magritte-pincode-input___RpWyq_2-0-17.magritte-invalid___hB8h2_2-0-17 .magritte-placeholder___10kQ0_2-0-17{
85
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-1-0);
86
86
  }
87
- .magritte-pincode-input___RpWyq_2-0-15.magritte-focus-visible___BN1eD_2-0-15{
88
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-0-2) solid 4px;
87
+ .magritte-pincode-input___RpWyq_2-0-17.magritte-focus-visible___BN1eD_2-0-17{
88
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-1-0) solid 4px;
89
89
  }
90
- .magritte-pincode-input___RpWyq_2-0-15.magritte-focus-visible___BN1eD_2-0-15.magritte-invalid___hB8h2_2-0-15{
91
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-0-2);
90
+ .magritte-pincode-input___RpWyq_2-0-17.magritte-focus-visible___BN1eD_2-0-17.magritte-invalid___hB8h2_2-0-17{
91
+ outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-1-0);
92
92
  }
93
- .magritte-digit-box-container___BqMWw_2-0-15{
93
+ .magritte-digit-box-container___BqMWw_2-0-17{
94
94
  display:flex;
95
95
  gap:var(--magritte-pincode-input-gap);
96
96
  position:absolute;
@@ -101,7 +101,7 @@
101
101
  pointer-events:none;
102
102
  z-index:0;
103
103
  }
104
- .magritte-digit-box___6J0Q2_2-0-15{
104
+ .magritte-digit-box___6J0Q2_2-0-17{
105
105
  flex:0 0 var(--magritte-digit-box-width);
106
106
  pointer-events:auto;
107
107
  display:flex;
@@ -109,13 +109,13 @@
109
109
  justify-content:center;
110
110
  user-select:none;
111
111
  }
112
- .magritte-digit-box___6J0Q2_2-0-15::selection{
112
+ .magritte-digit-box___6J0Q2_2-0-17::selection{
113
113
  background-color:transparent;
114
114
  }
115
- .magritte-digit-box___6J0Q2_2-0-15::-moz-selection{
115
+ .magritte-digit-box___6J0Q2_2-0-17::-moz-selection{
116
116
  background-color:transparent;
117
117
  }
118
- .magritte-digits-input___4QeLj_2-0-15{
118
+ .magritte-digits-input___4QeLj_2-0-17{
119
119
  display:block;
120
120
  position:absolute;
121
121
  top:0;
@@ -133,42 +133,42 @@
133
133
  appearance:none;
134
134
  caret-color:transparent;
135
135
  }
136
- .magritte-digits-input___4QeLj_2-0-15::selection{
136
+ .magritte-digits-input___4QeLj_2-0-17::selection{
137
137
  background-color:transparent;
138
138
  appearance:none;
139
139
  }
140
- .magritte-digits-input___4QeLj_2-0-15::-moz-selection{
140
+ .magritte-digits-input___4QeLj_2-0-17::-moz-selection{
141
141
  background-color:transparent;
142
142
  appearance:none;
143
143
  }
144
- .magritte-caret-left___iZMuA_2-0-15::before,
145
- .magritte-caret-right___u8wNk_2-0-15::after{
144
+ .magritte-caret-left___iZMuA_2-0-17::before,
145
+ .magritte-caret-right___u8wNk_2-0-17::after{
146
146
  content:'';
147
147
  position:absolute;
148
148
  top:50%;
149
149
  transform:translateY(-50%);
150
150
  block-size:1em;
151
- border-left:1px solid var(--magritte-color-text-primary-v24-0-2);
152
- animation:magritte-caret-blink___-bhg7_2-0-15 1s steps(1) infinite;
151
+ border-left:1px solid var(--magritte-color-text-primary-v24-1-0);
152
+ animation:magritte-caret-blink___-bhg7_2-0-17 1s steps(1) infinite;
153
153
  }
154
- .magritte-caret-left___iZMuA_2-0-15::before{
154
+ .magritte-caret-left___iZMuA_2-0-17::before{
155
155
  left:-1px;
156
156
  }
157
- .magritte-caret-right___u8wNk_2-0-15::after{
157
+ .magritte-caret-right___u8wNk_2-0-17::after{
158
158
  right:-1px;
159
159
  }
160
- .magritte-placeholder___10kQ0_2-0-15{
161
- color:var(--magritte-color-component-input-text-placeholder-v24-0-2);
160
+ .magritte-placeholder___10kQ0_2-0-17{
161
+ color:var(--magritte-color-component-input-text-placeholder-v24-1-0);
162
162
  }
163
- .magritte-value-container___9JR3e_2-0-15{
163
+ .magritte-value-container___9JR3e_2-0-17{
164
164
  pointer-events:none;
165
165
  position:relative;
166
166
  }
167
- .magritte-ghost-value___jPQwY_2-0-15{
167
+ .magritte-ghost-value___jPQwY_2-0-17{
168
168
  display:inline-block;
169
169
  visibility:hidden;
170
170
  }
171
- @keyframes magritte-caret-blink___-bhg7_2-0-15{
171
+ @keyframes magritte-caret-blink___-bhg7_2-0-17{
172
172
  50%{
173
173
  opacity:0;
174
174
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-pincode-input",
3
- "version": "2.0.15",
3
+ "version": "2.0.17",
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.4",
26
26
  "@hh.ru/magritte-common-use-multiple-refs": "1.1.10",
27
- "@hh.ru/magritte-design-tokens": "24.0.2",
28
- "@hh.ru/magritte-ui-form-helper": "2.0.14",
27
+ "@hh.ru/magritte-design-tokens": "24.1.0",
28
+ "@hh.ru/magritte-ui-form-helper": "2.0.16",
29
29
  "@hh.ru/magritte-ui-mock-component": "1.1.6"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "classnames": ">=2.3.2",
33
33
  "react": ">=18.2.0"
34
34
  },
35
- "gitHead": "fb00ac076efc693c4d42541accc1b304078eca58"
35
+ "gitHead": "8c58f57e256c3254714904d0905c216b2668481c"
36
36
  }