@hh.ru/magritte-ui-pincode-input 1.0.1 → 1.0.2

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 +74 -74
  3. package/package.json +3 -3
package/PincodeInput.js CHANGED
@@ -6,7 +6,7 @@ import { keyboardMatch, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
6
6
  import { Selection } from '@hh.ru/magritte-common-text-selection';
7
7
  import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
8
8
 
9
- var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-0-1","pincodeInput":"magritte-pincode-input___RpWyq_1-0-1","medium":"magritte-medium___wfRSc_1-0-1","placeholder":"magritte-placeholder___10kQ0_1-0-1","focus":"magritte-focus___IuhXb_1-0-1","invalid":"magritte-invalid___hB8h2_1-0-1","focus-visible":"magritte-focus-visible___BN1eD_1-0-1","focusVisible":"magritte-focus-visible___BN1eD_1-0-1","digit-box-container":"magritte-digit-box-container___BqMWw_1-0-1","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-0-1","digit-box":"magritte-digit-box___6J0Q2_1-0-1","digitBox":"magritte-digit-box___6J0Q2_1-0-1","digits-input":"magritte-digits-input___4QeLj_1-0-1","digitsInput":"magritte-digits-input___4QeLj_1-0-1","caret-left":"magritte-caret-left___iZMuA_1-0-1","caretLeft":"magritte-caret-left___iZMuA_1-0-1","caret-right":"magritte-caret-right___u8wNk_1-0-1","caretRight":"magritte-caret-right___u8wNk_1-0-1","caret-blink":"magritte-caret-blink___-bhg7_1-0-1","caretBlink":"magritte-caret-blink___-bhg7_1-0-1","value-container":"magritte-value-container___9JR3e_1-0-1","valueContainer":"magritte-value-container___9JR3e_1-0-1"};
9
+ var styles = {"pincode-input":"magritte-pincode-input___RpWyq_1-0-2","pincodeInput":"magritte-pincode-input___RpWyq_1-0-2","medium":"magritte-medium___wfRSc_1-0-2","placeholder":"magritte-placeholder___10kQ0_1-0-2","focus":"magritte-focus___IuhXb_1-0-2","invalid":"magritte-invalid___hB8h2_1-0-2","focus-visible":"magritte-focus-visible___BN1eD_1-0-2","focusVisible":"magritte-focus-visible___BN1eD_1-0-2","digit-box-container":"magritte-digit-box-container___BqMWw_1-0-2","digitBoxContainer":"magritte-digit-box-container___BqMWw_1-0-2","digit-box":"magritte-digit-box___6J0Q2_1-0-2","digitBox":"magritte-digit-box___6J0Q2_1-0-2","digits-input":"magritte-digits-input___4QeLj_1-0-2","digitsInput":"magritte-digits-input___4QeLj_1-0-2","caret-left":"magritte-caret-left___iZMuA_1-0-2","caretLeft":"magritte-caret-left___iZMuA_1-0-2","caret-right":"magritte-caret-right___u8wNk_1-0-2","caretRight":"magritte-caret-right___u8wNk_1-0-2","caret-blink":"magritte-caret-blink___-bhg7_1-0-2","caretBlink":"magritte-caret-blink___-bhg7_1-0-2","value-container":"magritte-value-container___9JR3e_1-0-2","valueContainer":"magritte-value-container___9JR3e_1-0-2"};
10
10
 
11
11
  const moveCaretTo = (ref, position, callback) =>
12
12
  // Каретка сдвигается при изменении содержимого инпута автоматически
package/index.css CHANGED
@@ -1,97 +1,97 @@
1
1
  :root{
2
- --magritte-color-text-primary-v21-0-0:#000000;
3
- --magritte-color-component-input-stroke-state-field-hovered-v21-0-0:#CCD5DF;
4
- --magritte-color-component-input-stroke-state-field-focused-v21-0-0:#0070ff;
5
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-0-0:#0070ff7a;
6
- --magritte-color-component-input-stroke-state-field-invalid-v21-0-0:#ff4d3a;
7
- --magritte-color-component-input-background-field-v21-0-0:#ffffff;
8
- --magritte-color-component-input-background-state-field-hovered-v21-0-0:#ffffff;
9
- --magritte-color-component-input-background-state-field-focused-v21-0-0:#ffffff;
10
- --magritte-color-component-input-background-state-field-invalid-v21-0-0:#ffffff;
11
- --magritte-color-component-input-stroke-field-v21-0-0:#DCE3EB;
12
- --magritte-color-component-input-text-state-content-focused-v21-0-0:#000000;
13
- --magritte-color-component-input-text-state-placeholder-hovered-v21-0-0:#768694;
14
- --magritte-color-component-input-text-state-placeholder-focused-v21-0-0:#AABBCA;
15
- --magritte-color-component-input-text-state-placeholder-invalid-v21-0-0:#AABBCA;
16
- --magritte-color-component-input-text-placeholder-v21-0-0:#AABBCA;
2
+ --magritte-color-text-primary-v21-1-0:#000000;
3
+ --magritte-color-component-input-stroke-state-field-hovered-v21-1-0:#CCD5DF;
4
+ --magritte-color-component-input-stroke-state-field-focused-v21-1-0:#0070ff;
5
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-1-0:#0070ff7a;
6
+ --magritte-color-component-input-stroke-state-field-invalid-v21-1-0:#ff4d3a;
7
+ --magritte-color-component-input-background-field-v21-1-0:#ffffff;
8
+ --magritte-color-component-input-background-state-field-hovered-v21-1-0:#ffffff;
9
+ --magritte-color-component-input-background-state-field-focused-v21-1-0:#ffffff;
10
+ --magritte-color-component-input-background-state-field-invalid-v21-1-0:#ffffff;
11
+ --magritte-color-component-input-stroke-field-v21-1-0:#DCE3EB;
12
+ --magritte-color-component-input-text-state-content-focused-v21-1-0:#000000;
13
+ --magritte-color-component-input-text-state-placeholder-hovered-v21-1-0:#768694;
14
+ --magritte-color-component-input-text-state-placeholder-focused-v21-1-0:#AABBCA;
15
+ --magritte-color-component-input-text-state-placeholder-invalid-v21-1-0:#AABBCA;
16
+ --magritte-color-component-input-text-placeholder-v21-1-0:#AABBCA;
17
17
  }
18
18
  :root{
19
- --magritte-font-families-body-v21-0-0:hh sans;
20
- --magritte-semantic-border-width-default-v21-0-0:1px;
21
- --magritte-semantic-border-width-focused-v21-0-0:2px;
22
- --magritte-static-border-radius-300-v21-0-0:12px;
23
- --magritte-static-border-radius-450-v21-0-0:18px;
19
+ --magritte-font-families-body-v21-1-0:hh sans;
20
+ --magritte-semantic-border-width-default-v21-1-0:1px;
21
+ --magritte-semantic-border-width-focused-v21-1-0:2px;
22
+ --magritte-static-border-radius-300-v21-1-0:12px;
23
+ --magritte-static-border-radius-450-v21-1-0:18px;
24
24
  }
25
25
  .magritte-night-theme{
26
- --magritte-color-text-primary-v21-0-0:#ffffff;
27
- --magritte-color-component-input-stroke-state-field-hovered-v21-0-0:#3B3B3B;
28
- --magritte-color-component-input-stroke-state-field-focused-v21-0-0:#0070ff;
29
- --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-0-0:#0070ff7a;
30
- --magritte-color-component-input-stroke-state-field-invalid-v21-0-0:#ff4d3a;
31
- --magritte-color-component-input-background-field-v21-0-0:#1B1B1B;
32
- --magritte-color-component-input-background-state-field-hovered-v21-0-0:#1B1B1B;
33
- --magritte-color-component-input-background-state-field-focused-v21-0-0:#1B1B1B;
34
- --magritte-color-component-input-background-state-field-invalid-v21-0-0:#1B1B1B;
35
- --magritte-color-component-input-stroke-field-v21-0-0:#303030;
36
- --magritte-color-component-input-text-placeholder-v21-0-0:#535353;
37
- --magritte-color-component-input-text-state-content-focused-v21-0-0:#ffffff;
38
- --magritte-color-component-input-text-state-placeholder-hovered-v21-0-0:#5E5E5E;
39
- --magritte-color-component-input-text-state-placeholder-focused-v21-0-0:#535353;
40
- --magritte-color-component-input-text-state-placeholder-invalid-v21-0-0:#535353;
41
- }
42
- .magritte-pincode-input___RpWyq_1-0-1{
26
+ --magritte-color-text-primary-v21-1-0:#ffffff;
27
+ --magritte-color-component-input-stroke-state-field-hovered-v21-1-0:#3B3B3B;
28
+ --magritte-color-component-input-stroke-state-field-focused-v21-1-0:#0070ff;
29
+ --magritte-color-component-input-stroke-state-accent-focused-accessible-v21-1-0:#0070ff7a;
30
+ --magritte-color-component-input-stroke-state-field-invalid-v21-1-0:#ff4d3a;
31
+ --magritte-color-component-input-background-field-v21-1-0:#1B1B1B;
32
+ --magritte-color-component-input-background-state-field-hovered-v21-1-0:#1B1B1B;
33
+ --magritte-color-component-input-background-state-field-focused-v21-1-0:#1B1B1B;
34
+ --magritte-color-component-input-background-state-field-invalid-v21-1-0:#1B1B1B;
35
+ --magritte-color-component-input-stroke-field-v21-1-0:#303030;
36
+ --magritte-color-component-input-text-placeholder-v21-1-0:#535353;
37
+ --magritte-color-component-input-text-state-content-focused-v21-1-0:#ffffff;
38
+ --magritte-color-component-input-text-state-placeholder-hovered-v21-1-0:#5E5E5E;
39
+ --magritte-color-component-input-text-state-placeholder-focused-v21-1-0:#535353;
40
+ --magritte-color-component-input-text-state-placeholder-invalid-v21-1-0:#535353;
41
+ }
42
+ .magritte-pincode-input___RpWyq_1-0-2{
43
43
  --magritte-pincode-input-padding-horizontal:20px;
44
44
  --magritte-pincode-input-padding-vertical:8px;
45
45
  --magritte-pincode-input-gap:6px;
46
46
  box-sizing:border-box;
47
47
  height:88px;
48
- border:var(--magritte-semantic-border-width-default-v21-0-0) solid var(--magritte-color-component-input-stroke-field-v21-0-0);
49
- border-radius:var(--magritte-static-border-radius-450-v21-0-0);
50
- background-color:var(--magritte-color-component-input-background-field-v21-0-0);
48
+ border:var(--magritte-semantic-border-width-default-v21-1-0) solid var(--magritte-color-component-input-stroke-field-v21-1-0);
49
+ border-radius:var(--magritte-static-border-radius-450-v21-1-0);
50
+ background-color:var(--magritte-color-component-input-background-field-v21-1-0);
51
51
  padding:var(--magritte-pincode-input-padding-vertical) var(--magritte-pincode-input-padding-horizontal);
52
52
  position:relative;
53
53
  cursor:text;
54
- font-family:var(--magritte-font-families-body-v21-0-0);
54
+ font-family:var(--magritte-font-families-body-v21-1-0);
55
55
  font-size:32px;
56
56
  font-style:normal;
57
57
  font-weight:normal;
58
58
  line-height:40px;
59
- color:var(--magritte-color-component-input-text-state-content-focused-v21-0-0);
59
+ color:var(--magritte-color-component-input-text-state-content-focused-v21-1-0);
60
60
  }
61
- .magritte-pincode-input___RpWyq_1-0-1.magritte-medium___wfRSc_1-0-1{
61
+ .magritte-pincode-input___RpWyq_1-0-2.magritte-medium___wfRSc_1-0-2{
62
62
  font-size:28px;
63
63
  --magritte-pincode-input-padding-horizontal:16px;
64
64
  --magritte-pincode-input-padding-vertical:6px;
65
65
  --magritte-pincode-input-gap:4px;
66
- border-radius:var(--magritte-static-border-radius-300-v21-0-0);
66
+ border-radius:var(--magritte-static-border-radius-300-v21-1-0);
67
67
  height:76px;
68
68
  }
69
- .magritte-pincode-input___RpWyq_1-0-1:hover{
70
- border-color:var(--magritte-color-component-input-stroke-state-field-hovered-v21-0-0);
71
- background-color:var(--magritte-color-component-input-background-state-field-hovered-v21-0-0);
69
+ .magritte-pincode-input___RpWyq_1-0-2:hover{
70
+ border-color:var(--magritte-color-component-input-stroke-state-field-hovered-v21-1-0);
71
+ background-color:var(--magritte-color-component-input-background-state-field-hovered-v21-1-0);
72
72
  }
73
- .magritte-pincode-input___RpWyq_1-0-1:hover .magritte-placeholder___10kQ0_1-0-1{
74
- color:var(--magritte-color-component-input-text-state-placeholder-hovered-v21-0-0);
73
+ .magritte-pincode-input___RpWyq_1-0-2:hover .magritte-placeholder___10kQ0_1-0-2{
74
+ color:var(--magritte-color-component-input-text-state-placeholder-hovered-v21-1-0);
75
75
  }
76
- .magritte-pincode-input___RpWyq_1-0-1.magritte-focus___IuhXb_1-0-1{
77
- border:var(--magritte-semantic-border-width-focused-v21-0-0) solid var(--magritte-color-component-input-stroke-state-field-focused-v21-0-0);
78
- background-color:var(--magritte-color-component-input-background-state-field-focused-v21-0-0);
76
+ .magritte-pincode-input___RpWyq_1-0-2.magritte-focus___IuhXb_1-0-2{
77
+ border:var(--magritte-semantic-border-width-focused-v21-1-0) solid var(--magritte-color-component-input-stroke-state-field-focused-v21-1-0);
78
+ background-color:var(--magritte-color-component-input-background-state-field-focused-v21-1-0);
79
79
  padding:var(--magritte-pincode-input-padding-vertical) calc(var(--magritte-pincode-input-padding-horizontal) - 1px);
80
80
  }
81
- .magritte-pincode-input___RpWyq_1-0-1.magritte-focus___IuhXb_1-0-1 .magritte-placeholder___10kQ0_1-0-1{
82
- color:var(--magritte-color-component-input-text-state-placeholder-focused-v21-0-0);
81
+ .magritte-pincode-input___RpWyq_1-0-2.magritte-focus___IuhXb_1-0-2 .magritte-placeholder___10kQ0_1-0-2{
82
+ color:var(--magritte-color-component-input-text-state-placeholder-focused-v21-1-0);
83
83
  }
84
- .magritte-pincode-input___RpWyq_1-0-1.magritte-invalid___hB8h2_1-0-1{
85
- border:var(--magritte-semantic-border-width-default-v21-0-0) solid var(--magritte-color-component-input-stroke-state-field-invalid-v21-0-0);
86
- background-color:var(--magritte-color-component-input-background-state-field-invalid-v21-0-0);
84
+ .magritte-pincode-input___RpWyq_1-0-2.magritte-invalid___hB8h2_1-0-2{
85
+ border:var(--magritte-semantic-border-width-default-v21-1-0) solid var(--magritte-color-component-input-stroke-state-field-invalid-v21-1-0);
86
+ background-color:var(--magritte-color-component-input-background-state-field-invalid-v21-1-0);
87
87
  }
88
- .magritte-pincode-input___RpWyq_1-0-1.magritte-invalid___hB8h2_1-0-1 .magritte-placeholder___10kQ0_1-0-1{
89
- color:var(--magritte-color-component-input-text-state-placeholder-invalid-v21-0-0);
88
+ .magritte-pincode-input___RpWyq_1-0-2.magritte-invalid___hB8h2_1-0-2 .magritte-placeholder___10kQ0_1-0-2{
89
+ color:var(--magritte-color-component-input-text-state-placeholder-invalid-v21-1-0);
90
90
  }
91
- .magritte-pincode-input___RpWyq_1-0-1.magritte-focus-visible___BN1eD_1-0-1{
92
- outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v21-0-0) solid 4px;
91
+ .magritte-pincode-input___RpWyq_1-0-2.magritte-focus-visible___BN1eD_1-0-2{
92
+ outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v21-1-0) solid 4px;
93
93
  }
94
- .magritte-digit-box-container___BqMWw_1-0-1{
94
+ .magritte-digit-box-container___BqMWw_1-0-2{
95
95
  display:flex;
96
96
  gap:var(--magritte-pincode-input-gap);
97
97
  position:relative;
@@ -99,13 +99,13 @@
99
99
  align-items:stretch;
100
100
  height:100%;
101
101
  }
102
- .magritte-digit-box___6J0Q2_1-0-1{
102
+ .magritte-digit-box___6J0Q2_1-0-2{
103
103
  flex:0 0 calc((100% - (var(--magritte-pincode-input-gap) * (var(--magritte-pincode-digits-count) - 1))) / var(--magritte-pincode-digits-count));
104
104
  display:flex;
105
105
  align-items:center;
106
106
  justify-content:center;
107
107
  }
108
- .magritte-digits-input___4QeLj_1-0-1{
108
+ .magritte-digits-input___4QeLj_1-0-2{
109
109
  display:block;
110
110
  position:absolute;
111
111
  inset:0;
@@ -118,26 +118,26 @@
118
118
  z-index:0;
119
119
  pointer-events:none;
120
120
  }
121
- .magritte-digits-input___4QeLj_1-0-1::selection{
121
+ .magritte-digits-input___4QeLj_1-0-2::selection{
122
122
  background-color:transparent;
123
123
  }
124
- .magritte-digits-input___4QeLj_1-0-1::-moz-selection{
124
+ .magritte-digits-input___4QeLj_1-0-2::-moz-selection{
125
125
  background-color:transparent;
126
126
  }
127
- .magritte-caret-left___iZMuA_1-0-1::before,
128
- .magritte-caret-right___u8wNk_1-0-1::after{
127
+ .magritte-caret-left___iZMuA_1-0-2::before,
128
+ .magritte-caret-right___u8wNk_1-0-2::after{
129
129
  content:'';
130
130
  block-size:1em;
131
- border-left:1px solid var(--magritte-color-text-primary-v21-0-0);
132
- animation:magritte-caret-blink___-bhg7_1-0-1 1s steps(1) infinite;
131
+ border-left:1px solid var(--magritte-color-text-primary-v21-1-0);
132
+ animation:magritte-caret-blink___-bhg7_1-0-2 1s steps(1) infinite;
133
133
  }
134
- .magritte-placeholder___10kQ0_1-0-1{
135
- color:var(--magritte-color-component-input-text-placeholder-v21-0-0);
134
+ .magritte-placeholder___10kQ0_1-0-2{
135
+ color:var(--magritte-color-component-input-text-placeholder-v21-1-0);
136
136
  }
137
- .magritte-value-container___9JR3e_1-0-1{
137
+ .magritte-value-container___9JR3e_1-0-2{
138
138
  pointer-events:none;
139
139
  }
140
- @keyframes magritte-caret-blink___-bhg7_1-0-1{
140
+ @keyframes magritte-caret-blink___-bhg7_1-0-2{
141
141
  50%{
142
142
  opacity:0;
143
143
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-pincode-input",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -25,11 +25,11 @@
25
25
  "dependencies": {
26
26
  "@hh.ru/magritte-common-keyboard": "4.0.4",
27
27
  "@hh.ru/magritte-common-text-selection": "0.1.5",
28
- "@hh.ru/magritte-ui-form-helper": "1.0.21"
28
+ "@hh.ru/magritte-ui-form-helper": "1.0.22"
29
29
  },
30
30
  "peerDependencies": {
31
31
  "classnames": ">=2.3.2",
32
32
  "react": ">=18.2.0"
33
33
  },
34
- "gitHead": "75a6b12c08b7ca443e43da143a22adfc91282816"
34
+ "gitHead": "6ae3dbd40e749f4dfd123c76295ec05afc2c79e0"
35
35
  }