@alfalab/core-components-pattern-lock-v1 1.0.3 → 1.1.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 (55) hide show
  1. package/components/base-pattern-lock/Component.js +1 -1
  2. package/components/base-pattern-lock/index.css +9 -7
  3. package/cssm/components/base-pattern-lock/index.module.css +3 -1
  4. package/cssm/desktop/desktop.module.css +4 -2
  5. package/cssm/mobile/mobile.module.css +10 -5
  6. package/desktop/Component.desktop.js +1 -1
  7. package/desktop/desktop.css +8 -6
  8. package/esm/components/base-pattern-lock/Component.js +1 -1
  9. package/esm/components/base-pattern-lock/index.css +9 -7
  10. package/esm/desktop/Component.desktop.js +1 -1
  11. package/esm/desktop/desktop.css +8 -6
  12. package/esm/mobile/Component.mobile.js +1 -1
  13. package/esm/mobile/mobile.css +17 -12
  14. package/mobile/Component.mobile.js +1 -1
  15. package/mobile/mobile.css +17 -12
  16. package/modern/components/base-pattern-lock/Component.js +1 -1
  17. package/modern/components/base-pattern-lock/index.css +9 -7
  18. package/modern/desktop/Component.desktop.js +1 -1
  19. package/modern/desktop/desktop.css +8 -6
  20. package/modern/mobile/Component.mobile.js +1 -1
  21. package/modern/mobile/mobile.css +17 -12
  22. package/moderncssm/Component.responsive.d.ts +10 -0
  23. package/moderncssm/Component.responsive.js +17 -0
  24. package/moderncssm/components/base-pattern-lock/Component.d.ts +6 -0
  25. package/moderncssm/components/base-pattern-lock/Component.js +52 -0
  26. package/moderncssm/components/base-pattern-lock/index.d.ts +1 -0
  27. package/moderncssm/components/base-pattern-lock/index.js +1 -0
  28. package/moderncssm/components/base-pattern-lock/index.module.css +28 -0
  29. package/moderncssm/consts.d.ts +11 -0
  30. package/moderncssm/consts.js +27 -0
  31. package/moderncssm/desktop/Component.desktop.d.ts +6 -0
  32. package/moderncssm/desktop/Component.desktop.js +7 -0
  33. package/moderncssm/desktop/desktop.module.css +14 -0
  34. package/moderncssm/desktop/index.d.ts +2 -0
  35. package/moderncssm/desktop/index.js +1 -0
  36. package/moderncssm/hooks/use-pattern-lock-cleanup.d.ts +6 -0
  37. package/moderncssm/hooks/use-pattern-lock-cleanup.js +14 -0
  38. package/moderncssm/index.d.ts +3 -0
  39. package/moderncssm/index.js +2 -0
  40. package/moderncssm/mobile/Component.mobile.d.ts +6 -0
  41. package/moderncssm/mobile/Component.mobile.js +7 -0
  42. package/moderncssm/mobile/index.d.ts +2 -0
  43. package/moderncssm/mobile/index.js +1 -0
  44. package/moderncssm/mobile/mobile.module.css +30 -0
  45. package/moderncssm/shared/index.d.ts +2 -0
  46. package/moderncssm/shared/index.js +2 -0
  47. package/moderncssm/typings.d.ts +91 -0
  48. package/moderncssm/typings.js +1 -0
  49. package/moderncssm/utils.d.ts +16 -0
  50. package/moderncssm/utils.js +98 -0
  51. package/moderncssm/vars.css +0 -0
  52. package/package.json +4 -4
  53. package/src/components/base-pattern-lock/index.module.css +2 -2
  54. package/src/desktop/desktop.module.css +3 -3
  55. package/src/mobile/mobile.module.css +6 -6
@@ -1,4 +1,4 @@
1
- /* hash: 1phqn */
1
+ /* hash: a2nym */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-text-negative: #ec2d20;
@@ -20,30 +20,32 @@
20
20
  --gap-3xl: 40px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
21
 
22
22
  /* новые значения, используйте их */
23
+ --gap-16: var(--gap-m);
24
+ --gap-40: var(--gap-3xl);
23
25
  } :root {
24
26
  } :root {
25
27
  --size-xs-height: 40px;
26
28
  } :root {
27
- } .pattern-lock-v1__component_1g2kb canvas {
29
+ } .pattern-lock-v1__component_1onw2 canvas {
28
30
  display: block;
29
31
  margin: 0 auto;
30
- } .pattern-lock-v1__hidden_1g2kb {
32
+ } .pattern-lock-v1__hidden_1onw2 {
31
33
  visibility: hidden;
32
- } .pattern-lock-v1__message_1g2kb {
34
+ } .pattern-lock-v1__message_1onw2 {
33
35
  font-size: 16px;
34
36
  line-height: 24px;
35
37
  font-weight: 400;
36
38
 
37
39
  text-align: center;
38
- padding: 0 var(--gap-m) var(--gap-3xl);
40
+ padding: 0 var(--gap-16) var(--gap-40);
39
41
  min-height: 24px;
40
42
  overflow: hidden;
41
43
  text-overflow: ellipsis;
42
44
  white-space: nowrap;
43
45
  color: var(--color-light-text-primary);
44
- } .pattern-lock-v1__error_1g2kb {
46
+ } .pattern-lock-v1__error_1onw2 {
45
47
  color: var(--color-light-text-negative);
46
- } .pattern-lock-v1__forgotBtn_1g2kb {
48
+ } .pattern-lock-v1__forgotBtn_1onw2 {
47
49
  display: block;
48
50
  min-height: var(--size-xs-height);
49
51
  }
@@ -1,7 +1,7 @@
1
1
  import React, { forwardRef } from 'react';
2
2
  import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
3
3
 
4
- const styles = {"component":"pattern-lock-v1__component_1vg7t","forgotBtn":"pattern-lock-v1__forgotBtn_1vg7t","hiddenBtn":"pattern-lock-v1__hiddenBtn_1vg7t"};
4
+ const styles = {"component":"pattern-lock-v1__component_1x7qz","forgotBtn":"pattern-lock-v1__forgotBtn_1x7qz","hiddenBtn":"pattern-lock-v1__hiddenBtn_1x7qz"};
5
5
  require('./desktop.css')
6
6
 
7
7
  const PatternLockDesktopV1 = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, hover: true, ref: ref, styles: styles }));
@@ -1,4 +1,4 @@
1
- /* hash: hqm8y */
1
+ /* hash: 8t22s */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -18,15 +18,17 @@
18
18
  --gap-xl: 24px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
19
19
 
20
20
  /* новые значения, используйте их */
21
+ --gap-8: var(--gap-xs);
22
+ --gap-24: var(--gap-xl);
21
23
  } :root {
22
24
  } :root {
23
25
  } :root {
24
26
  --pattern-lock-v1-desktop-max-width: 240px;
25
- } .pattern-lock-v1__component_1vg7t {
27
+ } .pattern-lock-v1__component_1x7qz {
26
28
  max-width: var(--pattern-lock-v1-desktop-max-width);
27
- margin: var(--gap-xs) 0 var(--gap-xl) 0;
28
- } .pattern-lock-v1__forgotBtn_1vg7t {
29
- margin: var(--gap-xl) auto 0;
30
- } .pattern-lock-v1__hiddenBtn_1vg7t {
29
+ margin: var(--gap-8) 0 var(--gap-24) 0;
30
+ } .pattern-lock-v1__forgotBtn_1x7qz {
31
+ margin: var(--gap-24) auto 0;
32
+ } .pattern-lock-v1__hiddenBtn_1x7qz {
31
33
  display: none;
32
34
  }
@@ -1,7 +1,7 @@
1
1
  import React, { forwardRef } from 'react';
2
2
  import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
3
3
 
4
- const styles = {"component":"pattern-lock-v1__component_1tqfd","forgotBtn":"pattern-lock-v1__forgotBtn_1tqfd"};
4
+ const styles = {"component":"pattern-lock-v1__component_1eiha","forgotBtn":"pattern-lock-v1__forgotBtn_1eiha"};
5
5
  require('./mobile.css')
6
6
 
7
7
  const PatternLockMobileV1 = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, ref: ref, styles: styles }));
@@ -1,4 +1,4 @@
1
- /* hash: 4wpht */
1
+ /* hash: 3yytd */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -21,32 +21,37 @@
21
21
  --gap-2xl: 32px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
22
22
 
23
23
  /* новые значения, используйте их */
24
+ --gap-8: var(--gap-xs);
25
+ --gap-12: var(--gap-s);
26
+ --gap-20: var(--gap-l);
27
+ --gap-24: var(--gap-xl);
28
+ --gap-32: var(--gap-2xl);
24
29
  } :root {
25
30
  } :root {
26
31
  --size-s-height: 48px;
27
32
  --size-m-height: 56px;
28
33
  } :root {
29
34
  --pattern-lock-v1-max-width: 500px;
30
- } .pattern-lock-v1__component_1tqfd {
35
+ } .pattern-lock-v1__component_1eiha {
31
36
  max-width: var(--pattern-lock-v1-max-width);
32
- margin: var(--gap-xs) 0 var(--gap-xl) 0;
33
- } .pattern-lock-v1__forgotBtn_1tqfd {
34
- margin: var(--gap-xl) auto 0;
37
+ margin: var(--gap-8) 0 var(--gap-24) 0;
38
+ } .pattern-lock-v1__forgotBtn_1eiha {
39
+ margin: var(--gap-24) auto 0;
35
40
  } @media screen and (min-width: 360px) {
36
- .pattern-lock-v1__forgotBtn_1tqfd {
37
- margin-top: var(--gap-2xl);
41
+ .pattern-lock-v1__forgotBtn_1eiha {
42
+ margin-top: var(--gap-32);
38
43
  min-height: var(--size-s-height);
39
44
  }
40
45
 
41
- .pattern-lock-v1__component_1tqfd {
42
- margin-bottom: var(--gap-s);
46
+ .pattern-lock-v1__component_1eiha {
47
+ margin-bottom: var(--gap-12);
43
48
  }
44
49
  } @media screen and (min-width: 390px) {
45
- .pattern-lock-v1__forgotBtn_1tqfd {
50
+ .pattern-lock-v1__forgotBtn_1eiha {
46
51
  min-height: var(--size-m-height);
47
52
  }
48
53
 
49
- .pattern-lock-v1__component_1tqfd {
50
- margin-bottom: var(--gap-l);
54
+ .pattern-lock-v1__component_1eiha {
55
+ margin-bottom: var(--gap-20);
51
56
  }
52
57
  }
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { TPatternLockInstance } from 'react-canvas-pattern-lock';
4
+ import { PatternLockProps } from "./typings";
5
+ /**
6
+ * @deprecated
7
+ * Использует PatternLock
8
+ */
9
+ declare const PatternLockV1: React.ForwardRefExoticComponent<PatternLockProps & React.RefAttributes<TPatternLockInstance>>;
10
+ export { PatternLockV1 };
@@ -0,0 +1,17 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { useMatchMedia } from '@alfalab/core-components-mq/moderncssm';
3
+ import { PatternLockDesktopV1 } from './desktop/Component.desktop.js';
4
+ import { PatternLockMobileV1 } from './mobile/Component.mobile.js';
5
+
6
+ /**
7
+ * @deprecated
8
+ * Использует PatternLock
9
+ */
10
+ const PatternLockV1 = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
11
+ const query = `(min-width: ${breakpoint}px)`;
12
+ const [isDesktop] = useMatchMedia(query);
13
+ const Component = isDesktop ? PatternLockDesktopV1 : PatternLockMobileV1;
14
+ return React.createElement(Component, { ref: ref, ...restProps });
15
+ });
16
+
17
+ export { PatternLockV1 };
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { TPatternLockInstance } from 'react-canvas-pattern-lock';
4
+ import { CommonPatternLockProps, PrivatePatternLockProps } from "../../typings";
5
+ declare const BasePatternLock: React.ForwardRefExoticComponent<(CommonPatternLockProps & PrivatePatternLockProps) & React.RefAttributes<TPatternLockInstance>>;
6
+ export { BasePatternLock };
@@ -0,0 +1,52 @@
1
+ import React, { forwardRef, useState, useEffect } from 'react';
2
+ import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
3
+ import cn from 'classnames';
4
+ import { ButtonMobile } from '@alfalab/core-components-button/moderncssm/mobile';
5
+ import { getDataTestId } from '@alfalab/core-components-shared/moderncssm';
6
+ import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from '../../consts.js';
7
+ import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from '../../utils.js';
8
+ import commonStyles from './index.module.css';
9
+
10
+ const BasePatternLock = forwardRef(({ observeTokens = false, observerParams = {}, justifyNodes = 'space-between', className, error, dataTestId, forgotCodeBtnText = 'Забыли код?', showForgotCodeBtn = false, onForgotBtnClick, extraBounds = DEFAULT_EXTRA_BOUNDS, message, messageClassName, hover, styles = {}, ...restProps }, ref) => {
11
+ const [params, setParams] = useState();
12
+ useEffect(() => {
13
+ const { elementSizes, width, height } = getSizes();
14
+ setParams({
15
+ theme: getTheme(elementSizes),
16
+ width,
17
+ height,
18
+ });
19
+ }, []);
20
+ useEffect(() => {
21
+ let styleObserver = null;
22
+ if (observeTokens) {
23
+ const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } = observerParams;
24
+ styleObserver = new MutationObserver(() => setParams((prevState) => {
25
+ const { width, height, elementSizes } = getSizes();
26
+ if (!prevState) {
27
+ return { theme: getTheme(elementSizes), width, height };
28
+ }
29
+ const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.bg;
30
+ const themeChanged = prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.BG);
31
+ if (themeChanged)
32
+ return { ...prevState, theme: getTheme(elementSizes) };
33
+ return prevState;
34
+ }));
35
+ styleObserver.observe(getTarget(), options);
36
+ }
37
+ return () => styleObserver?.disconnect();
38
+ // eslint-disable-next-line react-hooks/exhaustive-deps
39
+ }, [observeTokens]);
40
+ const renderMessage = () => (React.createElement("div", { className: cn(commonStyles.message, messageClassName), "data-test-id": getDataTestId(dataTestId, 'message') }, message));
41
+ const renderError = () => (React.createElement("div", { className: cn(commonStyles.message, commonStyles.error, messageClassName), "data-test-id": getDataTestId(dataTestId, 'error') }, error));
42
+ return (React.createElement("div", { className: cn(commonStyles.component, styles.component, className, {
43
+ [commonStyles.hidden]: !params,
44
+ }), "data-test-id": dataTestId },
45
+ error ? renderError() : renderMessage(),
46
+ React.createElement(ReactCanvasPatternLock, { ...restProps, ...params, ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds, hover: hover }),
47
+ showForgotCodeBtn ? (React.createElement(ButtonMobile, { view: 'transparent', className: cn(commonStyles.forgotBtn, styles.forgotBtn), onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: cn(commonStyles.forgotBtn, styles.forgotBtn, {
48
+ [styles.hiddenBtn]: Boolean(styles.hiddenBtn),
49
+ }) }))));
50
+ });
51
+
52
+ export { BasePatternLock };
@@ -0,0 +1 @@
1
+ export * from "./Component";
@@ -0,0 +1 @@
1
+ export { BasePatternLock } from './Component.js';
@@ -0,0 +1,28 @@
1
+ /* */
2
+ .component canvas {
3
+ display: block;
4
+ margin: 0 auto;
5
+ }
6
+ .hidden {
7
+ visibility: hidden;
8
+ }
9
+ .message {
10
+ font-size: 16px;
11
+ line-height: 24px;
12
+ font-weight: 400;
13
+
14
+ text-align: center;
15
+ padding: 0 var(--gap-16) var(--gap-40);
16
+ min-height: 24px;
17
+ overflow: hidden;
18
+ text-overflow: ellipsis;
19
+ white-space: nowrap;
20
+ color: var(--color-light-text-primary);
21
+ }
22
+ .error {
23
+ color: var(--color-light-text-negative);
24
+ }
25
+ .forgotBtn {
26
+ display: block;
27
+ min-height: var(--size-xs-height);
28
+ }
@@ -0,0 +1,11 @@
1
+ import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
2
+ import { ObservableTokens } from "./typings";
3
+ declare const OBSERVE_OPTIONS: MutationObserverInit;
4
+ declare const DEFAULT_EXTRA_BOUNDS: ReactPatternLockProps['extraBounds'];
5
+ declare const OBSERVABLE_TOKENS: ObservableTokens;
6
+ declare const THEME_STATE: {
7
+ INITIAL: string;
8
+ SUCCESS: string;
9
+ FAILURE: string;
10
+ };
11
+ export { OBSERVE_OPTIONS, DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, THEME_STATE };
@@ -0,0 +1,27 @@
1
+ const OBSERVE_OPTIONS = {
2
+ childList: true,
3
+ attributes: false,
4
+ characterData: false,
5
+ subtree: true,
6
+ };
7
+ const DEFAULT_EXTRA_BOUNDS = [75, 50, 75, 50];
8
+ const OBSERVABLE_TOKENS = {
9
+ ACCENT_INITIAL: '--color-light-neutral-0-inverted',
10
+ ACCENT_SUCCESS: '--color-light-status-positive',
11
+ ACCENT_FAILURE: '--color-light-status-negative',
12
+ PRIMARY: '--color-light-neutral-500',
13
+ BG: '--color-light-base-bg-primary',
14
+ RING_BG_INITIAL: '--color-light-neutral-translucent-200',
15
+ SELECTED_RING_BG_INITIAL: '--color-light-neutral-translucent-300',
16
+ SELECTED_RING_BG_SUCCESS: '--color-light-status-muted-positive',
17
+ SELECTED_RING_BG_FAILURE: '--color-light-status-muted-negative',
18
+ HOVER_INNER: '--color-light-neutral-500-hover',
19
+ HOVER_OUTER: '--color-light-neutral-translucent-200-hover',
20
+ };
21
+ const THEME_STATE = {
22
+ INITIAL: 'initial',
23
+ SUCCESS: 'success',
24
+ FAILURE: 'failure',
25
+ };
26
+
27
+ export { DEFAULT_EXTRA_BOUNDS, OBSERVABLE_TOKENS, OBSERVE_OPTIONS, THEME_STATE };
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { TPatternLockInstance } from 'react-canvas-pattern-lock';
4
+ import { CommonPatternLockProps } from "../typings";
5
+ declare const PatternLockDesktopV1: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
6
+ export { PatternLockDesktopV1 };
@@ -0,0 +1,7 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
3
+ import styles from './desktop.module.css';
4
+
5
+ const PatternLockDesktopV1 = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, hover: true, ref: ref, styles: styles }));
6
+
7
+ export { PatternLockDesktopV1 };
@@ -0,0 +1,14 @@
1
+ /* */
2
+ :root {
3
+ --pattern-lock-v1-desktop-max-width: 240px;
4
+ }
5
+ .component {
6
+ max-width: var(--pattern-lock-v1-desktop-max-width);
7
+ margin: var(--gap-8) 0 var(--gap-24) 0;
8
+ }
9
+ .forgotBtn {
10
+ margin: var(--gap-24) auto 0;
11
+ }
12
+ .hiddenBtn {
13
+ display: none;
14
+ }
@@ -0,0 +1,2 @@
1
+ export { PatternLockDesktopV1 } from "./Component.desktop";
2
+ export type { CommonPatternLockProps as PatternLockDesktopProps } from "../typings";
@@ -0,0 +1 @@
1
+ export { PatternLockDesktopV1 } from './Component.desktop.js';
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import { TPatternLockInstance } from 'react-canvas-pattern-lock';
3
+ declare const usePatternLockCleanup: (patternLockRef: React.MutableRefObject<TPatternLockInstance | null>) => {
4
+ clear: void;
5
+ };
6
+ export { usePatternLockCleanup };
@@ -0,0 +1,14 @@
1
+ import { useMemo } from 'react';
2
+
3
+ const usePatternLockCleanup = (patternLockRef) => {
4
+ const clear = useMemo(() => {
5
+ if (patternLockRef.current) {
6
+ patternLockRef.current.setInitialState();
7
+ }
8
+ }, [patternLockRef]);
9
+ return {
10
+ clear,
11
+ };
12
+ };
13
+
14
+ export { usePatternLockCleanup };
@@ -0,0 +1,3 @@
1
+ export type { PatternLockProps } from "./typings";
2
+ export * from "./Component.responsive";
3
+ export { THEME_STATE } from "./consts";
@@ -0,0 +1,2 @@
1
+ export { PatternLockV1 } from './Component.responsive.js';
2
+ export { THEME_STATE } from './consts.js';
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ import React from 'react';
3
+ import { TPatternLockInstance } from 'react-canvas-pattern-lock';
4
+ import { CommonPatternLockProps } from "../typings";
5
+ declare const PatternLockMobileV1: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
6
+ export { PatternLockMobileV1 };
@@ -0,0 +1,7 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
3
+ import styles from './mobile.module.css';
4
+
5
+ const PatternLockMobileV1 = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, ref: ref, styles: styles }));
6
+
7
+ export { PatternLockMobileV1 };
@@ -0,0 +1,2 @@
1
+ export { PatternLockMobileV1 } from "./Component.mobile";
2
+ export type { CommonPatternLockProps as PatternLockMobileProps } from "../typings";
@@ -0,0 +1 @@
1
+ export { PatternLockMobileV1 } from './Component.mobile.js';
@@ -0,0 +1,30 @@
1
+ /* */
2
+ :root {
3
+ --pattern-lock-v1-max-width: 500px;
4
+ }
5
+ .component {
6
+ max-width: var(--pattern-lock-v1-max-width);
7
+ margin: var(--gap-8) 0 var(--gap-24) 0;
8
+ }
9
+ .forgotBtn {
10
+ margin: var(--gap-24) auto 0;
11
+ }
12
+ @media screen and (min-width: 360px) {
13
+ .forgotBtn {
14
+ margin-top: var(--gap-32);
15
+ min-height: var(--size-s-height);
16
+ }
17
+
18
+ .component {
19
+ margin-bottom: var(--gap-12);
20
+ }
21
+ }
22
+ @media screen and (min-width: 390px) {
23
+ .forgotBtn {
24
+ min-height: var(--size-m-height);
25
+ }
26
+
27
+ .component {
28
+ margin-bottom: var(--gap-20);
29
+ }
30
+ }
@@ -0,0 +1,2 @@
1
+ export { getPatternLockTestIds } from "../utils";
2
+ export { usePatternLockCleanup } from "../hooks/use-pattern-lock-cleanup";
@@ -0,0 +1,2 @@
1
+ export { getPatternLockTestIds } from '../utils.js';
2
+ export { usePatternLockCleanup } from '../hooks/use-pattern-lock-cleanup.js';
@@ -0,0 +1,91 @@
1
+ import { MouseEvent, ReactNode } from 'react';
2
+ import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
3
+ type ConditionalProps = {
4
+ /**
5
+ * Показать кнопку "забыли код"
6
+ * @default "Забыли код?"
7
+ */
8
+ showForgotCodeBtn: true;
9
+ /**
10
+ * Текст кнопки "забыли код"
11
+ * @default "Забыли код?"
12
+ */
13
+ forgotCodeBtnText?: string;
14
+ /**
15
+ * Коллбэк, вызываемый при клике на кнопку "Забыли код"
16
+ */
17
+ onForgotBtnClick: (event: MouseEvent<HTMLButtonElement>) => void;
18
+ } | {
19
+ showForgotCodeBtn?: false;
20
+ onForgotBtnClick?: never;
21
+ forgotCodeBtnText?: never;
22
+ };
23
+ type CommonPatternLockProps = {
24
+ /**
25
+ * Дополнительный класс
26
+ */
27
+ className?: string;
28
+ /**
29
+ * Сообщение об ошибке
30
+ */
31
+ error?: ReactNode;
32
+ /**
33
+ * Сообщение над графическим ключом
34
+ */
35
+ message?: ReactNode;
36
+ /**
37
+ * Идентификатор для систем автоматизированного тестирования.
38
+ * Для сообщения используется модификатор -message, ошибки -error,
39
+ * кнопки "забыли код" -forgot-code-btn
40
+ */
41
+ dataTestId?: string;
42
+ /**
43
+ * Следить ли за изменениями значений цветовых токенов
44
+ * @default false
45
+ */
46
+ observeTokens?: boolean;
47
+ /**
48
+ * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties)
49
+ */
50
+ observerParams?: {
51
+ getTarget?: () => Node;
52
+ options?: MutationObserverInit;
53
+ };
54
+ /**
55
+ * Дополнительный класс для message/errorMessage
56
+ */
57
+ messageClassName?: string;
58
+ } & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover'> & ConditionalProps;
59
+ type PrivatePatternLockProps = {
60
+ /**
61
+ * Включает ховер-эффект
62
+ */
63
+ hover?: boolean;
64
+ /**
65
+ * Стили компонента
66
+ */
67
+ styles: {
68
+ [key: string]: string;
69
+ };
70
+ };
71
+ type PatternLockProps = CommonPatternLockProps & {
72
+ /**
73
+ * Контрольная точка, с нее начинается desktop версия
74
+ * @default 1024
75
+ */
76
+ breakpoint?: number;
77
+ };
78
+ type ObservableTokens = {
79
+ ACCENT_INITIAL: string;
80
+ ACCENT_SUCCESS: string;
81
+ ACCENT_FAILURE: string;
82
+ RING_BG_INITIAL: string;
83
+ SELECTED_RING_BG_INITIAL: string;
84
+ SELECTED_RING_BG_SUCCESS: string;
85
+ SELECTED_RING_BG_FAILURE: string;
86
+ PRIMARY: string;
87
+ BG: string;
88
+ HOVER_INNER: string;
89
+ HOVER_OUTER: string;
90
+ };
91
+ export { CommonPatternLockProps, PrivatePatternLockProps, PatternLockProps, ObservableTokens };
@@ -0,0 +1 @@
1
+