@alfalab/core-components-pattern-lock 1.0.0

package/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+declare const PatternLock: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    error?: React.ReactNode;
+    dataTestId?: string | undefined;
+    observeTokens?: boolean | undefined;
+    observerParams?: {
+        getTarget?: (() => Node) | undefined;
+        options?: MutationObserverInit | undefined;
+    } | undefined;
+} & Omit<import("react-canvas-pattern-lock").ReactPatternLockProps, "theme" | "width" | "height" | "rows" | "cols"> & React.RefAttributes<TPatternLockInstance>>;
+export { PatternLock };

package/Component.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('./utils-e7492ab3.js');
+var React = require('react');
+var reactCanvasPatternLock = require('react-canvas-pattern-lock');
+var cn = require('classnames');
+var coreComponentsGap = require('@alfalab/core-components-gap');
+var consts = require('./consts.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+
+var styles = {"component":"pattern-lock__component_1oflx","hidden":"pattern-lock__hidden_1oflx","error":"pattern-lock__error_1oflx"};
+require('./index.css')
+
+var PatternLock = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, restProps = utils.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId"]);
+    var _f = React.useState(), params = _f[0], setParams = _f[1];
+    React.useEffect(function () {
+        var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
+        setParams({
+            theme: utils.getTheme(elementSizes),
+            width: width,
+            height: height,
+        });
+    }, []);
+    React.useEffect(function () {
+        var styleObserver = null;
+        if (observeTokens) {
+            var _a = observerParams.options, options = _a === void 0 ? consts.OBSERVE_OPTIONS : _a, _b = observerParams.getTarget, getTarget = _b === void 0 ? utils.getDefaultObserveTarget : _b;
+            styleObserver = new MutationObserver(function () {
+                return setParams(function (prevState) {
+                    var _a = utils.getSizes(), width = _a.width, height = _a.height, elementSizes = _a.elementSizes;
+                    if (!prevState) {
+                        return { theme: utils.getTheme(elementSizes), width: width, height: height };
+                    }
+                    var prevBgColor = prevState.theme[consts.THEME_STATE.INITIAL].colors.bg;
+                    var themeChanged = prevBgColor !== utils.getColorByToken(consts.OBSERVABLE_TOKENS.BG);
+                    if (themeChanged)
+                        return utils.__assign(utils.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
+                    return prevState;
+                });
+            });
+            styleObserver.observe(getTarget(), options);
+        }
+        return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [observeTokens]);
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className, (_b = {}, _b[styles.hidden] = !params, _b)), "data-test-id": dataTestId },
+        React__default['default'].createElement(coreComponentsGap.Gap, { size: 'm' }),
+        React__default['default'].createElement(coreComponentsGap.Gap, { size: 's' }),
+        React__default['default'].createElement("div", { className: styles.error }, error),
+        React__default['default'].createElement(coreComponentsGap.Gap, { size: 'xl' }),
+        React__default['default'].createElement(reactCanvasPatternLock.ReactCanvasPatternLock, utils.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes }))));
+});
+
+exports.PatternLock = PatternLock;

package/consts.d.ts

@@ -0,0 +1,9 @@
+import { ObservableTokens } from "./typings";
+declare const OBSERVE_OPTIONS: MutationObserverInit;
+declare const OBSERVABLE_TOKENS: ObservableTokens;
+declare const THEME_STATE: {
+    INITIAL: string;
+    SUCCESS: string;
+    FAILURE: string;
+};
+export { OBSERVE_OPTIONS, OBSERVABLE_TOKENS, THEME_STATE };

package/consts.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var OBSERVE_OPTIONS = {
+    childList: true,
+    attributes: false,
+    characterData: false,
+    subtree: true,
+};
+var OBSERVABLE_TOKENS = {
+    ACCENT_INITIAL: '--color-light-graphic-primary',
+    ACCENT_SUCCESS: '--color-light-graphic-positive',
+    ACCENT_FAILURE: '--color-light-graphic-negative',
+    PRIMARY: '--color-light-graphic-tertiary',
+    BG: '--color-light-bg-primary',
+    RING_BG_INITIAL: '--color-light-specialbg-secondary-transparent',
+    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',
+};
+var THEME_STATE = {
+    INITIAL: 'initial',
+    SUCCESS: 'success',
+    FAILURE: 'failure',
+};
+
+exports.OBSERVABLE_TOKENS = OBSERVABLE_TOKENS;
+exports.OBSERVE_OPTIONS = OBSERVE_OPTIONS;
+exports.THEME_STATE = THEME_STATE;

package/cssm/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+declare const PatternLock: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    error?: React.ReactNode;
+    dataTestId?: string | undefined;
+    observeTokens?: boolean | undefined;
+    observerParams?: {
+        getTarget?: (() => Node) | undefined;
+        options?: MutationObserverInit | undefined;
+    } | undefined;
+} & Omit<import("react-canvas-pattern-lock").ReactPatternLockProps, "theme" | "width" | "height" | "rows" | "cols"> & React.RefAttributes<TPatternLockInstance>>;
+export { PatternLock };

package/cssm/Component.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('./utils-455c7792.js');
+var React = require('react');
+var reactCanvasPatternLock = require('react-canvas-pattern-lock');
+var cn = require('classnames');
+var coreComponentsGap = require('@alfalab/core-components-gap/cssm');
+var consts = require('./consts.js');
+var styles = require('./index.module.css');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+
+var PatternLock = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, restProps = utils.__rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId"]);
+    var _f = React.useState(), params = _f[0], setParams = _f[1];
+    React.useEffect(function () {
+        var _a = utils.getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
+        setParams({
+            theme: utils.getTheme(elementSizes),
+            width: width,
+            height: height,
+        });
+    }, []);
+    React.useEffect(function () {
+        var styleObserver = null;
+        if (observeTokens) {
+            var _a = observerParams.options, options = _a === void 0 ? consts.OBSERVE_OPTIONS : _a, _b = observerParams.getTarget, getTarget = _b === void 0 ? utils.getDefaultObserveTarget : _b;
+            styleObserver = new MutationObserver(function () {
+                return setParams(function (prevState) {
+                    var _a = utils.getSizes(), width = _a.width, height = _a.height, elementSizes = _a.elementSizes;
+                    if (!prevState) {
+                        return { theme: utils.getTheme(elementSizes), width: width, height: height };
+                    }
+                    var prevBgColor = prevState.theme[consts.THEME_STATE.INITIAL].colors.bg;
+                    var themeChanged = prevBgColor !== utils.getColorByToken(consts.OBSERVABLE_TOKENS.BG);
+                    if (themeChanged)
+                        return utils.__assign(utils.__assign({}, prevState), { theme: utils.getTheme(elementSizes) });
+                    return prevState;
+                });
+            });
+            styleObserver.observe(getTarget(), options);
+        }
+        return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [observeTokens]);
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].component, className, (_b = {}, _b[styles__default['default'].hidden] = !params, _b)), "data-test-id": dataTestId },
+        React__default['default'].createElement(coreComponentsGap.Gap, { size: 'm' }),
+        React__default['default'].createElement(coreComponentsGap.Gap, { size: 's' }),
+        React__default['default'].createElement("div", { className: styles__default['default'].error }, error),
+        React__default['default'].createElement(coreComponentsGap.Gap, { size: 'xl' }),
+        React__default['default'].createElement(reactCanvasPatternLock.ReactCanvasPatternLock, utils.__assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes }))));
+});
+
+exports.PatternLock = PatternLock;

package/cssm/consts.d.ts

@@ -0,0 +1,9 @@
+import { ObservableTokens } from "./typings";
+declare const OBSERVE_OPTIONS: MutationObserverInit;
+declare const OBSERVABLE_TOKENS: ObservableTokens;
+declare const THEME_STATE: {
+    INITIAL: string;
+    SUCCESS: string;
+    FAILURE: string;
+};
+export { OBSERVE_OPTIONS, OBSERVABLE_TOKENS, THEME_STATE };

package/cssm/consts.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var OBSERVE_OPTIONS = {
+    childList: true,
+    attributes: false,
+    characterData: false,
+    subtree: true,
+};
+var OBSERVABLE_TOKENS = {
+    ACCENT_INITIAL: '--color-light-graphic-primary',
+    ACCENT_SUCCESS: '--color-light-graphic-positive',
+    ACCENT_FAILURE: '--color-light-graphic-negative',
+    PRIMARY: '--color-light-graphic-tertiary',
+    BG: '--color-light-bg-primary',
+    RING_BG_INITIAL: '--color-light-specialbg-secondary-transparent',
+    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',
+};
+var THEME_STATE = {
+    INITIAL: 'initial',
+    SUCCESS: 'success',
+    FAILURE: 'failure',
+};
+
+exports.OBSERVABLE_TOKENS = OBSERVABLE_TOKENS;
+exports.OBSERVE_OPTIONS = OBSERVE_OPTIONS;
+exports.THEME_STATE = THEME_STATE;

package/cssm/index.d.ts

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

package/cssm/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./utils-455c7792.js');
+require('react');
+require('react-canvas-pattern-lock');
+require('classnames');
+require('@alfalab/core-components-gap/cssm');
+var consts = require('./consts.js');
+require('./index.module.css');
+var Component = require('./Component.js');
+
+
+
+exports.THEME_STATE = consts.THEME_STATE;
+exports.PatternLock = Component.PatternLock;

package/cssm/index.module.css

@@ -0,0 +1,42 @@
+:root {
+    --color-light-text-negative: #d91d0b;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+    --gap-m: 16px;
+    --gap-xl: 24px;
+}
+:root {
+    --pattern-lock-max-width: 500px;
+}
+.component {
+    max-width: var(--pattern-lock-max-width);
+    margin: var(--gap-xs) 0 var(--gap-xl) 0
+}
+.component canvas {
+        display: block;
+        margin: 0 auto;
+    }
+.hidden {
+    visibility: hidden;
+}
+.error {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 var(--gap-m);
+    min-height: 24px;
+    color: var(--color-light-text-negative);
+}

package/cssm/typings.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { ReactPatternLockProps } from 'react-canvas-pattern-lock';
+type PatternLockProps = {
+    /**
+     * Дополнительный класс.
+     */
+    className?: string;
+    /**
+     * Сообщение об ошибке
+     */
+    error?: ReactNode;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     */
+    dataTestId?: string;
+    /**
+     * Следить ли за изменениями значений цветовых токенов.
+     * @default false
+     */
+    observeTokens?: boolean;
+    /**
+     * Параметры MutationObserver для наблюдения за изменениями режима(css custom properties).
+     */
+    observerParams?: {
+        getTarget?: () => Node;
+        options?: MutationObserverInit;
+    };
+} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols'>;
+type ObservableTokens = {
+    ACCENT_INITIAL: string;
+    ACCENT_SUCCESS: string;
+    ACCENT_FAILURE: string;
+    RING_BG_INITIAL: string;
+    SELECTED_RING_BG_INITIAL: string;
+    SELECTED_RING_BG_SUCCESS: string;
+    SELECTED_RING_BG_FAILURE: string;
+    PRIMARY: string;
+    BG: string;
+};
+export { PatternLockProps, ObservableTokens };

package/cssm/typings.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cssm/utils-455c7792.d.ts

@@ -0,0 +1,43 @@
+import { Theme, ThemeParams } from 'react-canvas-pattern-lock';
+declare function __extends(d: any, b: any): void;
+declare function __rest(s: any, e: any): {};
+declare function __decorate(decorators: any, target: any, key: any, desc: any, ...args: any[]): any;
+declare function __param(paramIndex: any, decorator: any): (target: any, key: any) => void;
+declare function __metadata(metadataKey: any, metadataValue: any): any;
+declare function __awaiter(thisArg: any, _arguments: any, P: any, generator: any): any;
+declare function __generator(thisArg: any, body: any): {
+    next: (v: any) => any;
+    throw: (v: any) => any;
+    return: (v: any) => any;
+};
+declare function __exportStar(m: any, o: any): void;
+declare function __values(o: any): any;
+declare function __read(o: any, n: any): any;
+declare function __spread(...args: any[]): any[];
+declare function __spreadArrays(...args: any[]): any[];
+declare function __spreadArray(to: any, from: any, pack: any, ...args: any[]): any;
+declare function __await(v: any): __await;
+declare class __await {
+    constructor(v: any);
+    v: any;
+}
+declare function __asyncGenerator(thisArg: any, _arguments: any, generator: any): {};
+declare function __asyncDelegator(o: any): {};
+declare function __asyncValues(o: any): any;
+declare function __makeTemplateObject(cooked: any, raw: any): any;
+declare function __importStar(mod: any): any;
+declare function __importDefault(mod: any): any;
+declare function __classPrivateFieldGet(receiver: any, state: any, kind: any, f: any): any;
+declare function __classPrivateFieldSet(receiver: any, state: any, value: any, kind: any, f: any): any;
+declare function __classPrivateFieldIn(state: any, receiver: any): any;
+declare function __assign(...args: any[]): any;
+declare function __createBinding(o: any, m: any, k: any, k2: any): void;
+declare function getDefaultObserveTarget(): HTMLHeadElement;
+declare function getColorByToken(token: string): string;
+declare const getSizes: () => {
+    elementSizes: ThemeParams['dimens'];
+    width: number;
+    height: number;
+};
+declare function getTheme(dimens: ThemeParams['dimens']): Theme;
+export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __spreadArray, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __classPrivateFieldIn, __assign, __createBinding, getDefaultObserveTarget, getColorByToken, getSizes, getTheme };

package/cssm/utils-455c7792.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var consts = require('./consts.js');
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+exports.__assign = function () {
+    exports.__assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return exports.__assign.apply(this, arguments);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function getDefaultObserveTarget() {
+    return document.head;
+}
+function getColorByToken(token) {
+    return getComputedStyle(document.documentElement).getPropertyValue(token);
+}
+var getSizes = (function () {
+    var COMMON_SIZES = {
+        lineWidth: 6,
+        nodeRing: 0,
+        nodeCore: 12,
+    };
+    var cachedSize;
+    return function () {
+        if (cachedSize) {
+            return cachedSize;
+        }
+        if (window.matchMedia('(min-width: 390px)').matches) {
+            cachedSize = {
+                elementSizes: exports.__assign(exports.__assign({}, COMMON_SIZES), { nodeRadius: 43 }),
+                width: 322,
+                height: 322,
+            };
+        }
+        else if (window.matchMedia('(min-width: 360px)').matches) {
+            cachedSize = {
+                elementSizes: exports.__assign(exports.__assign({}, COMMON_SIZES), { nodeRadius: 38 }),
+                width: 292,
+                height: 292,
+            };
+        }
+        else {
+            cachedSize = {
+                elementSizes: exports.__assign(exports.__assign({}, COMMON_SIZES), { nodeRadius: 32 }),
+                width: 240,
+                height: 240,
+            };
+        }
+        return cachedSize;
+    };
+})();
+function getTheme(dimens) {
+    var _a;
+    var baseColors = {
+        primary: getColorByToken(consts.OBSERVABLE_TOKENS.PRIMARY),
+        bg: getColorByToken(consts.OBSERVABLE_TOKENS.BG),
+        ringBg: getColorByToken(consts.OBSERVABLE_TOKENS.RING_BG_INITIAL),
+    };
+    return _a = {},
+        _a[consts.THEME_STATE.INITIAL] = {
+            colors: exports.__assign(exports.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_INITIAL), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL) }),
+            dimens: dimens,
+        },
+        _a[consts.THEME_STATE.SUCCESS] = {
+            colors: exports.__assign(exports.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_SUCCESS), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS) }),
+            dimens: dimens,
+        },
+        _a[consts.THEME_STATE.FAILURE] = {
+            colors: exports.__assign(exports.__assign({}, baseColors), { accent: getColorByToken(consts.OBSERVABLE_TOKENS.ACCENT_FAILURE), selectedRingBg: getColorByToken(consts.OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE) }),
+            dimens: dimens,
+        },
+        _a;
+}
+
+exports.__rest = __rest;
+exports.getColorByToken = getColorByToken;
+exports.getDefaultObserveTarget = getDefaultObserveTarget;
+exports.getSizes = getSizes;
+exports.getTheme = getTheme;

package/cssm/utils.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('./utils-455c7792.js');
+require('./consts.js');
+
+
+
+exports.getColorByToken = utils.getColorByToken;
+exports.getDefaultObserveTarget = utils.getDefaultObserveTarget;
+exports.getSizes = utils.getSizes;
+exports.getTheme = utils.getTheme;

package/esm/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+import { TPatternLockInstance } from 'react-canvas-pattern-lock';
+declare const PatternLock: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    error?: React.ReactNode;
+    dataTestId?: string | undefined;
+    observeTokens?: boolean | undefined;
+    observerParams?: {
+        getTarget?: (() => Node) | undefined;
+        options?: MutationObserverInit | undefined;
+    } | undefined;
+} & Omit<import("react-canvas-pattern-lock").ReactPatternLockProps, "theme" | "width" | "height" | "rows" | "cols"> & React.RefAttributes<TPatternLockInstance>>;
+export { PatternLock };

package/esm/Component.js

@@ -0,0 +1,53 @@
+import { _ as __rest, g as getSizes, a as getTheme, b as getColorByToken, c as __assign, d as getDefaultObserveTarget } from './utils-0cf042c3.js';
+import React, { forwardRef, useState, useEffect } from 'react';
+import { ReactCanvasPatternLock } from 'react-canvas-pattern-lock';
+import cn from 'classnames';
+import { Gap } from '@alfalab/core-components-gap/esm';
+import { THEME_STATE, OBSERVABLE_TOKENS, OBSERVE_OPTIONS } from './consts.js';
+
+var styles = {"component":"pattern-lock__component_1oflx","hidden":"pattern-lock__hidden_1oflx","error":"pattern-lock__error_1oflx"};
+require('./index.css')
+
+var PatternLock = forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.observeTokens, observeTokens = _c === void 0 ? false : _c, _d = _a.observerParams, observerParams = _d === void 0 ? {} : _d, _e = _a.justifyNodes, justifyNodes = _e === void 0 ? 'space-between' : _e, className = _a.className, error = _a.error, dataTestId = _a.dataTestId, restProps = __rest(_a, ["observeTokens", "observerParams", "justifyNodes", "className", "error", "dataTestId"]);
+    var _f = useState(), params = _f[0], setParams = _f[1];
+    useEffect(function () {
+        var _a = getSizes(), elementSizes = _a.elementSizes, width = _a.width, height = _a.height;
+        setParams({
+            theme: getTheme(elementSizes),
+            width: width,
+            height: height,
+        });
+    }, []);
+    useEffect(function () {
+        var styleObserver = null;
+        if (observeTokens) {
+            var _a = observerParams.options, options = _a === void 0 ? OBSERVE_OPTIONS : _a, _b = observerParams.getTarget, getTarget = _b === void 0 ? getDefaultObserveTarget : _b;
+            styleObserver = new MutationObserver(function () {
+                return setParams(function (prevState) {
+                    var _a = getSizes(), width = _a.width, height = _a.height, elementSizes = _a.elementSizes;
+                    if (!prevState) {
+                        return { theme: getTheme(elementSizes), width: width, height: height };
+                    }
+                    var prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.bg;
+                    var themeChanged = prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.BG);
+                    if (themeChanged)
+                        return __assign(__assign({}, prevState), { theme: getTheme(elementSizes) });
+                    return prevState;
+                });
+            });
+            styleObserver.observe(getTarget(), options);
+        }
+        return function () { return styleObserver === null || styleObserver === void 0 ? void 0 : styleObserver.disconnect(); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [observeTokens]);
+    return (React.createElement("div", { className: cn(styles.component, className, (_b = {}, _b[styles.hidden] = !params, _b)), "data-test-id": dataTestId },
+        React.createElement(Gap, { size: 'm' }),
+        React.createElement(Gap, { size: 's' }),
+        React.createElement("div", { className: styles.error }, error),
+        React.createElement(Gap, { size: 'xl' }),
+        React.createElement(ReactCanvasPatternLock, __assign({}, restProps, params, { ref: ref, rows: 3, cols: 3, justifyNodes: justifyNodes }))));
+});
+
+export { PatternLock };

package/esm/consts.d.ts

@@ -0,0 +1,9 @@
+import { ObservableTokens } from "./typings";
+declare const OBSERVE_OPTIONS: MutationObserverInit;
+declare const OBSERVABLE_TOKENS: ObservableTokens;
+declare const THEME_STATE: {
+    INITIAL: string;
+    SUCCESS: string;
+    FAILURE: string;
+};
+export { OBSERVE_OPTIONS, OBSERVABLE_TOKENS, THEME_STATE };

package/esm/consts.js

@@ -0,0 +1,24 @@
+var OBSERVE_OPTIONS = {
+    childList: true,
+    attributes: false,
+    characterData: false,
+    subtree: true,
+};
+var OBSERVABLE_TOKENS = {
+    ACCENT_INITIAL: '--color-light-graphic-primary',
+    ACCENT_SUCCESS: '--color-light-graphic-positive',
+    ACCENT_FAILURE: '--color-light-graphic-negative',
+    PRIMARY: '--color-light-graphic-tertiary',
+    BG: '--color-light-bg-primary',
+    RING_BG_INITIAL: '--color-light-specialbg-secondary-transparent',
+    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',
+};
+var THEME_STATE = {
+    INITIAL: 'initial',
+    SUCCESS: 'success',
+    FAILURE: 'failure',
+};
+
+export { OBSERVABLE_TOKENS, OBSERVE_OPTIONS, THEME_STATE };