@hh.ru/magritte-ui-pincode-input 2.0.14 → 2.0.16

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 +7 -7
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-14","pincodeInput":"magritte-pincode-input___RpWyq_2-0-14","medium":"magritte-medium___wfRSc_2-0-14","placeholder":"magritte-placeholder___10kQ0_2-0-14","focus":"magritte-focus___IuhXb_2-0-14","invalid":"magritte-invalid___hB8h2_2-0-14","focus-visible":"magritte-focus-visible___BN1eD_2-0-14","focusVisible":"magritte-focus-visible___BN1eD_2-0-14","digit-box-container":"magritte-digit-box-container___BqMWw_2-0-14","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-0-14","digit-box":"magritte-digit-box___6J0Q2_2-0-14","digitBox":"magritte-digit-box___6J0Q2_2-0-14","digits-input":"magritte-digits-input___4QeLj_2-0-14","digitsInput":"magritte-digits-input___4QeLj_2-0-14","caret-left":"magritte-caret-left___iZMuA_2-0-14","caretLeft":"magritte-caret-left___iZMuA_2-0-14","caret-right":"magritte-caret-right___u8wNk_2-0-14","caretRight":"magritte-caret-right___u8wNk_2-0-14","caret-blink":"magritte-caret-blink___-bhg7_2-0-14","caretBlink":"magritte-caret-blink___-bhg7_2-0-14","value-container":"magritte-value-container___9JR3e_2-0-14","valueContainer":"magritte-value-container___9JR3e_2-0-14","ghost-value":"magritte-ghost-value___jPQwY_2-0-14","ghostValue":"magritte-ghost-value___jPQwY_2-0-14"};
10
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_2-0-16","pincodeInput":"magritte-pincode-input___RpWyq_2-0-16","medium":"magritte-medium___wfRSc_2-0-16","placeholder":"magritte-placeholder___10kQ0_2-0-16","focus":"magritte-focus___IuhXb_2-0-16","invalid":"magritte-invalid___hB8h2_2-0-16","focus-visible":"magritte-focus-visible___BN1eD_2-0-16","focusVisible":"magritte-focus-visible___BN1eD_2-0-16","digit-box-container":"magritte-digit-box-container___BqMWw_2-0-16","digitBoxContainer":"magritte-digit-box-container___BqMWw_2-0-16","digit-box":"magritte-digit-box___6J0Q2_2-0-16","digitBox":"magritte-digit-box___6J0Q2_2-0-16","digits-input":"magritte-digits-input___4QeLj_2-0-16","digitsInput":"magritte-digits-input___4QeLj_2-0-16","caret-left":"magritte-caret-left___iZMuA_2-0-16","caretLeft":"magritte-caret-left___iZMuA_2-0-16","caret-right":"magritte-caret-right___u8wNk_2-0-16","caretRight":"magritte-caret-right___u8wNk_2-0-16","caret-blink":"magritte-caret-blink___-bhg7_2-0-16","caretBlink":"magritte-caret-blink___-bhg7_2-0-16","value-container":"magritte-value-container___9JR3e_2-0-16","valueContainer":"magritte-value-container___9JR3e_2-0-16","ghost-value":"magritte-ghost-value___jPQwY_2-0-16","ghostValue":"magritte-ghost-value___jPQwY_2-0-16"};
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-14{
38
+ .magritte-pincode-input___RpWyq_2-0-16{
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-14.magritte-medium___wfRSc_2-0-14{
58
+ .magritte-pincode-input___RpWyq_2-0-16.magritte-medium___wfRSc_2-0-16{
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-14: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-16: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-14:hover .magritte-placeholder___10kQ0_2-0-14{
71
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-0-2);
70
+ .magritte-pincode-input___RpWyq_2-0-16:hover .magritte-placeholder___10kQ0_2-0-16{
71
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v24-1-0);
72
72
  }
73
- .magritte-pincode-input___RpWyq_2-0-14.magritte-focus___IuhXb_2-0-14{
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-16.magritte-focus___IuhXb_2-0-16{
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-14.magritte-focus___IuhXb_2-0-14 .magritte-placeholder___10kQ0_2-0-14{
78
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-0-2);
77
+ .magritte-pincode-input___RpWyq_2-0-16.magritte-focus___IuhXb_2-0-16 .magritte-placeholder___10kQ0_2-0-16{
78
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v24-1-0);
79
79
  }
80
- .magritte-pincode-input___RpWyq_2-0-14.magritte-invalid___hB8h2_2-0-14{
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-16.magritte-invalid___hB8h2_2-0-16{
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-14.magritte-invalid___hB8h2_2-0-14 .magritte-placeholder___10kQ0_2-0-14{
85
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-0-2);
84
+ .magritte-pincode-input___RpWyq_2-0-16.magritte-invalid___hB8h2_2-0-16 .magritte-placeholder___10kQ0_2-0-16{
85
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v24-1-0);
86
86
  }
87
- .magritte-pincode-input___RpWyq_2-0-14.magritte-focus-visible___BN1eD_2-0-14{
88
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v24-0-2) solid 4px;
87
+ .magritte-pincode-input___RpWyq_2-0-16.magritte-focus-visible___BN1eD_2-0-16{
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-14.magritte-focus-visible___BN1eD_2-0-14.magritte-invalid___hB8h2_2-0-14{
91
- outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v24-0-2);
90
+ .magritte-pincode-input___RpWyq_2-0-16.magritte-focus-visible___BN1eD_2-0-16.magritte-invalid___hB8h2_2-0-16{
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-14{
93
+ .magritte-digit-box-container___BqMWw_2-0-16{
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-14{
104
+ .magritte-digit-box___6J0Q2_2-0-16{
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-14::selection{
112
+ .magritte-digit-box___6J0Q2_2-0-16::selection{
113
113
  background-color:transparent;
114
114
  }
115
- .magritte-digit-box___6J0Q2_2-0-14::-moz-selection{
115
+ .magritte-digit-box___6J0Q2_2-0-16::-moz-selection{
116
116
  background-color:transparent;
117
117
  }
118
- .magritte-digits-input___4QeLj_2-0-14{
118
+ .magritte-digits-input___4QeLj_2-0-16{
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-14::selection{
136
+ .magritte-digits-input___4QeLj_2-0-16::selection{
137
137
  background-color:transparent;
138
138
  appearance:none;
139
139
  }
140
- .magritte-digits-input___4QeLj_2-0-14::-moz-selection{
140
+ .magritte-digits-input___4QeLj_2-0-16::-moz-selection{
141
141
  background-color:transparent;
142
142
  appearance:none;
143
143
  }
144
- .magritte-caret-left___iZMuA_2-0-14::before,
145
- .magritte-caret-right___u8wNk_2-0-14::after{
144
+ .magritte-caret-left___iZMuA_2-0-16::before,
145
+ .magritte-caret-right___u8wNk_2-0-16::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-14 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-16 1s steps(1) infinite;
153
153
  }
154
- .magritte-caret-left___iZMuA_2-0-14::before{
154
+ .magritte-caret-left___iZMuA_2-0-16::before{
155
155
  left:-1px;
156
156
  }
157
- .magritte-caret-right___u8wNk_2-0-14::after{
157
+ .magritte-caret-right___u8wNk_2-0-16::after{
158
158
  right:-1px;
159
159
  }
160
- .magritte-placeholder___10kQ0_2-0-14{
161
- color:var(--magritte-color-component-input-text-placeholder-v24-0-2);
160
+ .magritte-placeholder___10kQ0_2-0-16{
161
+ color:var(--magritte-color-component-input-text-placeholder-v24-1-0);
162
162
  }
163
- .magritte-value-container___9JR3e_2-0-14{
163
+ .magritte-value-container___9JR3e_2-0-16{
164
164
  pointer-events:none;
165
165
  position:relative;
166
166
  }
167
- .magritte-ghost-value___jPQwY_2-0-14{
167
+ .magritte-ghost-value___jPQwY_2-0-16{
168
168
  display:inline-block;
169
169
  visibility:hidden;
170
170
  }
171
- @keyframes magritte-caret-blink___-bhg7_2-0-14{
171
+ @keyframes magritte-caret-blink___-bhg7_2-0-16{
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.14",
3
+ "version": "2.0.16",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -22,15 +22,15 @@
22
22
  "access": "public"
23
23
  },
24
24
  "dependencies": {
25
- "@hh.ru/magritte-common-keyboard": "4.1.3",
26
- "@hh.ru/magritte-common-use-multiple-refs": "1.1.9",
27
- "@hh.ru/magritte-design-tokens": "24.0.2",
28
- "@hh.ru/magritte-ui-form-helper": "2.0.13",
29
- "@hh.ru/magritte-ui-mock-component": "1.1.5"
25
+ "@hh.ru/magritte-common-keyboard": "4.1.4",
26
+ "@hh.ru/magritte-common-use-multiple-refs": "1.1.10",
27
+ "@hh.ru/magritte-design-tokens": "24.1.0",
28
+ "@hh.ru/magritte-ui-form-helper": "2.0.15",
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": "0bee0320d8b83b5915471b94b688af7954d5f7bd"
35
+ "gitHead": "bcc47002e5afb62cdb3f71fee209867b84407086"
36
36
  }