@alfalab/core-components-pattern-lock 1.5.1 → 1.6.0

package/hooks/use-pattern-lock-cleanup.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var usePatternLockCleanup = function (patternLockRef) {
+    var clear = React.useMemo(function () {
+        if (patternLockRef.current) {
+            patternLockRef.current.setInitialState();
+        }
+    }, [patternLockRef]);
+    return {
+        clear: clear,
+    };
+};
+
+exports.usePatternLockCleanup = usePatternLockCleanup;

package/index.d.ts

@@ -1,3 +1,3 @@
 export type { PatternLockProps } from "./typings";
-export * from "./Component";
+export * from "./Component.responsive";
 export { THEME_STATE } from "./consts";

package/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Component = require('./Component.js');
+var Component_responsive = require('./Component.responsive.js');
 var consts = require('./consts.js');
 
 
 
-exports.PatternLock = Component.PatternLock;
+exports.PatternLock = Component_responsive.PatternLock;
 exports.THEME_STATE = consts.THEME_STATE;

package/mobile/Component.mobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { CommonPatternLockProps } from "../typings";
+declare const PatternLockMobile: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
+export { PatternLockMobile };

package/mobile/Component.mobile.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_basePatternLock_Component = require('../components/base-pattern-lock/Component.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var styles = {"component":"pattern-lock__component_lng5u","forgotBtn":"pattern-lock__forgotBtn_lng5u"};
+require('./mobile.css')
+
+var PatternLockMobile = React.forwardRef(function (restProps, ref) { return React__default.default.createElement(components_basePatternLock_Component.BasePatternLock, tslib.__assign({}, restProps, { ref: ref, styles: styles })); });
+
+exports.PatternLockMobile = PatternLockMobile;

package/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export { PatternLockMobile } from "./Component.mobile";
+export type { CommonPatternLockProps as PatternLockMobileProps } from "../typings";

package/mobile/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var mobile_Component_mobile = require('./Component.mobile.js');
+
+
+
+exports.PatternLockMobile = mobile_Component_mobile.PatternLockMobile;

package/mobile/mobile.css

@@ -0,0 +1,48 @@
+/* hash: 1t7io */
+: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 */ :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 */
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-l: 20px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+} :root {
+} :root {
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+} :root {
+    --pattern-lock-max-width: 500px;
+} .pattern-lock__component_lng5u {
+    max-width: var(--pattern-lock-max-width);
+    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+} .pattern-lock__forgotBtn_lng5u {
+    margin: var(--gap-xl) auto 0;
+} @media screen and (min-width: 360px) {
+    .pattern-lock__forgotBtn_lng5u {
+        margin-top: var(--gap-2xl);
+        min-height: var(--size-s-height);
+    }
+
+    .pattern-lock__component_lng5u {
+        margin-bottom: var(--gap-s);
+    }
+} @media screen and (min-width: 390px) {
+    .pattern-lock__forgotBtn_lng5u {
+        min-height: var(--size-m-height);
+    }
+
+    .pattern-lock__component_lng5u {
+        margin-bottom: var(--gap-l);
+    }
+}

package/mobile/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/mobile/index.js"
+}

package/modern/Component.responsive.js

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import { useMatchMedia } from '@alfalab/core-components-mq/modern';
+import { PatternLockDesktop } from './desktop/Component.desktop.js';
+import { PatternLockMobile } from './mobile/Component.mobile.js';
+
+const PatternLock = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
+    const query = `(min-width: ${breakpoint}px)`;
+    const [isDesktop] = useMatchMedia(query);
+    const Component = isDesktop ? PatternLockDesktop : PatternLockMobile;
+    return React.createElement(Component, { ref: ref, ...restProps });
+});
+
+export { PatternLock };

package/modern/components/base-pattern-lock/Component.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { CommonPatternLockProps, PrivatePatternLockProps } from "../../typings";
+declare const BasePatternLock: React.ForwardRefExoticComponent<(CommonPatternLockProps & PrivatePatternLockProps) & React.RefAttributes<TPatternLockInstance>>;
+export { BasePatternLock };

package/modern/{Component.js → components/base-pattern-lock/Component.js}

@@ -2,15 +2,14 @@ import React, { forwardRef, useState, useEffect } from 'react';
 import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
 import cn from 'classnames';
 import { ButtonMobile } from '@alfalab/core-components-button/modern/mobile';
-import { Gap } from '@alfalab/core-components-gap/modern';
 import { getDataTestId } from '@alfalab/core-components-shared/modern';
-import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from './consts.js';
-import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from './utils.js';
+import { THEME_STATE, DEFAULT_EXTRA_BOUNDS, OBSERVE_OPTIONS, OBSERVABLE_TOKENS } from '../../consts.js';
+import { getSizes, getTheme, getColorByToken, getDefaultObserveTarget } from '../../utils.js';
 
-const styles = {"component":"pattern-lock__component_1c1da","hidden":"pattern-lock__hidden_1c1da","message":"pattern-lock__message_1c1da","error":"pattern-lock__error_1c1da","forgotBtn":"pattern-lock__forgotBtn_1c1da"};
+const commonStyles = {"component":"pattern-lock__component_8m1ld","hidden":"pattern-lock__hidden_8m1ld","message":"pattern-lock__message_8m1ld","error":"pattern-lock__error_8m1ld","forgotBtn":"pattern-lock__forgotBtn_8m1ld"};
 require('./index.css')
 
-const PatternLock = forwardRef(({ observeTokens = false, observerParams = {}, justifyNodes = 'space-between', className, error, dataTestId, forgotCodeBtnText = 'Забыли код?', showForgotCodeBtn = false, onForgotBtnClick, extraBounds = DEFAULT_EXTRA_BOUNDS, message, ...restProps }, ref) => {
+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) => {
     const [params, setParams] = useState();
     useEffect(() => {
         const { elementSizes, width, height } = getSizes();
@@ -40,14 +39,16 @@ const PatternLock = forwardRef(({ observeTokens = false, observerParams = {}, ju
         return () => styleObserver?.disconnect();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [observeTokens]);
-    const renderMessage = () => (React.createElement("div", { className: styles.message, "data-test-id": getDataTestId(dataTestId, 'message') }, message));
-    const renderError = () => (React.createElement("div", { className: cn(styles.message, styles.error), "data-test-id": getDataTestId(dataTestId, 'error') }, error));
-    return (React.createElement("div", { className: cn(styles.component, className, { [styles.hidden]: !params }), "data-test-id": dataTestId },
-        React.createElement(Gap, { size: 'xs' }),
+    const renderMessage = () => (React.createElement("div", { className: cn(commonStyles.message, messageClassName), "data-test-id": getDataTestId(dataTestId, 'message') }, message));
+    const renderError = () => (React.createElement("div", { className: cn(commonStyles.message, commonStyles.error, messageClassName), "data-test-id": getDataTestId(dataTestId, 'error') }, error));
+    return (React.createElement("div", { className: cn(commonStyles.component, styles.component, className, {
+            [commonStyles.hidden]: !params,
+        }), "data-test-id": dataTestId },
         error ? renderError() : renderMessage(),
-        React.createElement(Gap, { size: '3xl' }),
-        React.createElement(ReactCanvasPatternLock, { ...restProps, ...params, ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds }),
-        showForgotCodeBtn ? (React.createElement(ButtonMobile, { view: 'link', className: styles.forgotBtn, onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: styles.forgotBtn }))));
+        React.createElement(ReactCanvasPatternLock, { ...restProps, ...params, ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes, extraBounds: extraBounds, hover: hover }),
+        showForgotCodeBtn ? (React.createElement(ButtonMobile, { view: 'link', className: cn(commonStyles.forgotBtn, styles.forgotBtn), onClick: onForgotBtnClick, dataTestId: getDataTestId(dataTestId, 'forgot-code-btn') }, forgotCodeBtnText)) : (React.createElement("div", { className: cn(commonStyles.forgotBtn, styles.forgotBtn, {
+                [styles.hiddenBtn]: Boolean(styles.hiddenBtn),
+            }) }))));
 });
 
-export { PatternLock };
+export { BasePatternLock };

package/{index.css → modern/components/base-pattern-lock/index.css}

@@ -1,4 +1,4 @@
-/* hash: dybik */
+/* hash: us3cg */
 :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 */ :root {
     --color-light-text-negative: #ec2e14;
@@ -14,60 +14,32 @@
     /* Hard up */
 } :root {
 } :root {
-    --gap-xs: 8px;
-    --gap-s: 12px;
     --gap-m: 16px;
-    --gap-l: 20px;
-    --gap-xl: 24px;
-    --gap-2xl: 32px;
+    --gap-3xl: 40px;
 } :root {
 } :root {
     --size-xs-height: 40px;
-    --size-s-height: 48px;
-    --size-m-height: 56px;
 } :root {
-    --pattern-lock-max-width: 500px;
-} .pattern-lock__component_1c1da {
-    max-width: var(--pattern-lock-max-width);
-    margin: var(--gap-xs) 0 var(--gap-xl) 0
-} .pattern-lock__component_1c1da canvas {
+} .pattern-lock__component_8m1ld canvas {
         display: block;
         margin: 0 auto;
-    } .pattern-lock__hidden_1c1da {
+    } .pattern-lock__hidden_8m1ld {
     visibility: hidden;
-} .pattern-lock__message_1c1da {
+} .pattern-lock__message_8m1ld {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
 
     text-align: center;
-    padding: 0 var(--gap-m);
+    padding: 0 var(--gap-m) var(--gap-3xl);
     min-height: 24px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--color-light-text-primary);
-} .pattern-lock__error_1c1da {
+} .pattern-lock__error_8m1ld {
     color: var(--color-light-text-negative);
-} .pattern-lock__forgotBtn_1c1da {
+} .pattern-lock__forgotBtn_8m1ld {
     display: block;
     min-height: var(--size-xs-height);
-    margin: var(--gap-xl) auto 0;
-} @media screen and (min-width: 360px) {
-    .pattern-lock__forgotBtn_1c1da {
-        margin-top: var(--gap-2xl);
-        min-height: var(--size-s-height);
-    }
-
-    .pattern-lock__component_1c1da {
-        margin-bottom: var(--gap-s);
-    }
-} @media screen and (min-width: 390px) {
-    .pattern-lock__forgotBtn_1c1da {
-        min-height: var(--size-m-height);
-    }
-
-    .pattern-lock__component_1c1da {
-        margin-bottom: var(--gap-l);
-    }
 }

package/modern/components/base-pattern-lock/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/modern/components/base-pattern-lock/index.js

@@ -0,0 +1 @@
+export { BasePatternLock } from './Component.js';

package/modern/consts.js

@@ -15,6 +15,8 @@ const OBSERVABLE_TOKENS = {
     SELECTED_RING_BG_INITIAL: '--color-light-specialbg-tertiary-transparent',
     SELECTED_RING_BG_SUCCESS: '--color-light-graphic-positive-alpha-10',
     SELECTED_RING_BG_FAILURE: '--color-light-graphic-negative-alpha-10',
+    HOVER_INNER: '--color-light-neutral-500-hover',
+    HOVER_OUTER: '--color-light-neutral-translucent-200-hover',
 };
 const THEME_STATE = {
     INITIAL: 'initial',

package/modern/desktop/Component.desktop.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { CommonPatternLockProps } from "../typings";
+declare const PatternLockDesktop: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
+export { PatternLockDesktop };

package/modern/desktop/Component.desktop.js

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
+
+const styles = {"component":"pattern-lock__component_e3f2p","forgotBtn":"pattern-lock__forgotBtn_e3f2p","hiddenBtn":"pattern-lock__hiddenBtn_e3f2p"};
+require('./desktop.css')
+
+const PatternLockDesktop = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, hover: true, ref: ref, styles: styles }));
+
+export { PatternLockDesktop };

package/modern/desktop/desktop.css

@@ -0,0 +1,28 @@
+/* hash: 1cxhs */
+: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 */ :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 */
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+    --gap-xl: 24px;
+} :root {
+} :root {
+} :root {
+    --pattern-lock-desktop-max-width: 240px;
+} .pattern-lock__component_e3f2p {
+    max-width: var(--pattern-lock-desktop-max-width);
+    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+} .pattern-lock__forgotBtn_e3f2p {
+    margin: var(--gap-xl) auto 0;
+} .pattern-lock__hiddenBtn_e3f2p {
+    display: none;
+}

package/modern/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export { PatternLockDesktop } from "./Component.desktop";
+export type { CommonPatternLockProps as PatternLockDesktopProps } from "../typings";

package/modern/desktop/index.js

@@ -0,0 +1 @@
+export { PatternLockDesktop } from './Component.desktop.js';

package/modern/hooks/use-pattern-lock-cleanup.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+declare const usePatternLockCleanup: (patternLockRef: React.MutableRefObject<TPatternLockInstance | null>) => {
+    clear: void;
+};
+export { usePatternLockCleanup };

package/modern/hooks/use-pattern-lock-cleanup.js

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+
+const usePatternLockCleanup = (patternLockRef) => {
+    const clear = useMemo(() => {
+        if (patternLockRef.current) {
+            patternLockRef.current.setInitialState();
+        }
+    }, [patternLockRef]);
+    return {
+        clear,
+    };
+};
+
+export { usePatternLockCleanup };

package/modern/index.d.ts

@@ -1,3 +1,3 @@
 export type { PatternLockProps } from "./typings";
-export * from "./Component";
+export * from "./Component.responsive";
 export { THEME_STATE } from "./consts";

package/modern/index.js

@@ -1,2 +1,2 @@
-export { PatternLock } from './Component.js';
+export { PatternLock } from './Component.responsive.js';
 export { THEME_STATE } from './consts.js';

package/modern/mobile/Component.mobile.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+import { CommonPatternLockProps } from "../typings";
+declare const PatternLockMobile: React.ForwardRefExoticComponent<CommonPatternLockProps & React.RefAttributes<TPatternLockInstance>>;
+export { PatternLockMobile };

package/modern/mobile/Component.mobile.js

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+import { BasePatternLock } from '../components/base-pattern-lock/Component.js';
+
+const styles = {"component":"pattern-lock__component_lng5u","forgotBtn":"pattern-lock__forgotBtn_lng5u"};
+require('./mobile.css')
+
+const PatternLockMobile = forwardRef((restProps, ref) => React.createElement(BasePatternLock, { ...restProps, ref: ref, styles: styles }));
+
+export { PatternLockMobile };

package/modern/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export { PatternLockMobile } from "./Component.mobile";
+export type { CommonPatternLockProps as PatternLockMobileProps } from "../typings";

package/modern/mobile/index.js

@@ -0,0 +1 @@
+export { PatternLockMobile } from './Component.mobile.js';

package/modern/mobile/mobile.css

@@ -0,0 +1,48 @@
+/* hash: 1t7io */
+: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 */ :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 */
+} :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 */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-xs: 8px;
+    --gap-s: 12px;
+    --gap-l: 20px;
+    --gap-xl: 24px;
+    --gap-2xl: 32px;
+} :root {
+} :root {
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+} :root {
+    --pattern-lock-max-width: 500px;
+} .pattern-lock__component_lng5u {
+    max-width: var(--pattern-lock-max-width);
+    margin: var(--gap-xs) 0 var(--gap-xl) 0;
+} .pattern-lock__forgotBtn_lng5u {
+    margin: var(--gap-xl) auto 0;
+} @media screen and (min-width: 360px) {
+    .pattern-lock__forgotBtn_lng5u {
+        margin-top: var(--gap-2xl);
+        min-height: var(--size-s-height);
+    }
+
+    .pattern-lock__component_lng5u {
+        margin-bottom: var(--gap-s);
+    }
+} @media screen and (min-width: 390px) {
+    .pattern-lock__forgotBtn_lng5u {
+        min-height: var(--size-m-height);
+    }
+
+    .pattern-lock__component_lng5u {
+        margin-bottom: var(--gap-l);
+    }
+}

package/modern/shared/index.d.ts

@@ -1 +1,2 @@
 export { getPatternLockTestIds } from "../utils";
+export { usePatternLockCleanup } from "../hooks/use-pattern-lock-cleanup";

package/modern/shared/index.js

@@ -1 +1,2 @@
 export { getPatternLockTestIds } from '../utils.js';
+export { usePatternLockCleanup } from '../hooks/use-pattern-lock-cleanup.js';

package/modern/typings.d.ts

@@ -2,7 +2,7 @@ import { MouseEvent, ReactNode } from 'react';
 import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
 type ConditionalProps = {
     /**
-     * Текст кнопки "забыли код"
+     * Показать кнопку "забыли код"
      * @default "Забыли код?"
      */
     showForgotCodeBtn: true;
@@ -20,7 +20,7 @@ type ConditionalProps = {
     onForgotBtnClick?: never;
     forgotCodeBtnText?: never;
 };
-type PatternLockProps = {
+type CommonPatternLockProps = {
     /**
      * Дополнительный класс.
      */
@@ -51,7 +51,30 @@ type PatternLockProps = {
         getTarget?: () => Node;
         options?: MutationObserverInit;
     };
-} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols'> & ConditionalProps;
+    /**
+     * Дополнительный класс для message/errorMessage
+     */
+    messageClassName?: string;
+} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover'> & ConditionalProps;
+type PrivatePatternLockProps = {
+    /**
+     * Включает ховер-эффект
+     */
+    hover?: boolean;
+    /**
+     * Стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+};
+type PatternLockProps = CommonPatternLockProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
 type ObservableTokens = {
     ACCENT_INITIAL: string;
     ACCENT_SUCCESS: string;
@@ -62,5 +85,7 @@ type ObservableTokens = {
     SELECTED_RING_BG_FAILURE: string;
     PRIMARY: string;
     BG: string;
+    HOVER_INNER: string;
+    HOVER_OUTER: string;
 };
-export { PatternLockProps, ObservableTokens };
+export { CommonPatternLockProps, PrivatePatternLockProps, PatternLockProps, ObservableTokens };

package/modern/utils.js

@@ -18,7 +18,14 @@ const getSizes = (() => {
         if (cachedSize) {
             return cachedSize;
         }
-        if (window.matchMedia('(min-width: 390px)').matches) {
+        if (window.matchMedia('(min-width: 600px)').matches) {
+            cachedSize = {
+                elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },
+                width: 240,
+                height: 240,
+            };
+        }
+        else if (window.matchMedia('(min-width: 390px)').matches) {
             cachedSize = {
                 elementSizes: { ...COMMON_SIZES, nodeRadius: 43 },
                 width: 322,
@@ -47,6 +54,10 @@ function getTheme(dimens) {
         primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),
         bg: getColorByToken(OBSERVABLE_TOKENS.BG),
         ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),
+        hover: {
+            inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),
+            outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),
+        },
     };
     return {
         [THEME_STATE.INITIAL]: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pattern-lock",
-    "version": "1.5.1",
+    "version": "1.6.0",
     "description": "Pattern lock",
     "keywords": [],
     "license": "MIT",
@@ -16,9 +16,9 @@
     },
     "dependencies": {
         "@alfalab/core-components-button": "^11.3.0",
-        "@alfalab/core-components-gap": "^1.3.0",
         "@alfalab/core-components-shared": "^0.9.1",
-        "react-canvas-pattern-lock": "^1.1.1",
+        "@alfalab/core-components-mq": "^4.2.0",
+        "react-canvas-pattern-lock": "^1.2.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"
     }

package/shared/index.d.ts

@@ -1 +1,2 @@
 export { getPatternLockTestIds } from "../utils";
+export { usePatternLockCleanup } from "../hooks/use-pattern-lock-cleanup";

package/shared/index.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var utils = require('../utils.js');
+var hooks_usePatternLockCleanup = require('../hooks/use-pattern-lock-cleanup.js');
 
 
 
 exports.getPatternLockTestIds = utils.getPatternLockTestIds;
+exports.usePatternLockCleanup = hooks_usePatternLockCleanup.usePatternLockCleanup;

package/src/Component.responsive.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import type { TPatternLockInstance } from 'react-canvas-pattern-lock';
+
+import { useMatchMedia } from '@alfalab/core-components-mq';
+
+import { PatternLockDesktop } from './desktop';
+import { PatternLockMobile } from './mobile';
+import { PatternLockProps } from './typings';
+
+export const PatternLock = forwardRef<TPatternLockInstance, PatternLockProps>(
+    ({ breakpoint = 1024, ...restProps }, ref) => {
+        const query = `(min-width: ${breakpoint}px)`;
+
+        const [isDesktop] = useMatchMedia(query);
+
+        const Component = isDesktop ? PatternLockDesktop : PatternLockMobile;
+
+        return <Component ref={ref} {...restProps} />;
+    },
+);