@salutejs/plasma-web 1.585.0-canary.1741.15776056320.0 → 1.585.0-canary.1973.15679545656.0

package/components/CodeInput/CodeInput.config.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-secondary);\n                ", ": var(--text-negative);\n\n                ", ": var(--text-primary);\n                ", ": var(--text-negative);\n                ", ": var(--outline-accent);\n            "])), _styledComponents.codeInputTokens.captionColor, _styledComponents.codeInputTokens.captionColorError, _styledComponents.codeInputTokens.codeColor, _styledComponents.codeInputTokens.codeColorError, _styledComponents.codeInputTokens.borderColorFocus)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 2.5rem;\n                ", ": 0.75rem;\n\n                ", ": 0.75rem;\n\n                ", ": var(--plasma-typo-dspl-l-font-family);\n                ", ": var(--plasma-typo-dspl-l-font-style);\n                ", ": var(--plasma-typo-dspl-l-bold-font-weight);\n                ", ": var(--plasma-typo-dspl-l-letter-spacing);\n\n                ", ": 8rem;\n                ", ": 8rem;\n\n                ", ": 7rem;\n                ", ": 7rem;\n\n                ", ": 5.5rem;\n                ", ": 5.75rem;\n\n                ", ": var(--plasma-typo-h3-font-family);\n                ", ": var(--plasma-typo-h3-font-size);\n                ", ": var(--plasma-typo-h3-font-style);\n                ", ": var(--plasma-typo-h3-font-weight);\n                ", ": var(--plasma-typo-h3-letter-spacing);\n                ", ": var(--plasma-typo-h3-line-height);\n\n                ", ": 5rem;\n                ", ": 8rem;\n\n                ", ": 4.5rem;\n                ", ": 7rem;\n\n                ", ": 3.5rem;\n                ", ": 5.75rem;\n\n                ", ": 0.125rem;\n                ", ": 1.5rem;\n            "])), _styledComponents.codeInputTokens.captionGap, _styledComponents.codeInputTokens.codeItemsGap, _styledComponents.codeInputTokens.separatorWidth, _styledComponents.codeInputTokens.fontFamily, _styledComponents.codeInputTokens.fontStyle, _styledComponents.codeInputTokens.fontWeight, _styledComponents.codeInputTokens.letterSpacing, _styledComponents.codeInputTokens.largeFontSize, _styledComponents.codeInputTokens.largeLineHeight, _styledComponents.codeInputTokens.mediumFontSize, _styledComponents.codeInputTokens.mediumLineHeight, _styledComponents.codeInputTokens.smallFontSize, _styledComponents.codeInputTokens.smallLineHeight, _styledComponents.codeInputTokens.captionFontFamily, _styledComponents.codeInputTokens.captionFontSize, _styledComponents.codeInputTokens.captionFontStyle, _styledComponents.codeInputTokens.captionFontWeight, _styledComponents.codeInputTokens.captionLetterSpacing, _styledComponents.codeInputTokens.captionLineHeight, _styledComponents.codeInputTokens.largeCodeItemWidth, _styledComponents.codeInputTokens.largeCodeItemHeight, _styledComponents.codeInputTokens.mediumCodeItemWidth, _styledComponents.codeInputTokens.mediumCodeItemHeight, _styledComponents.codeInputTokens.smallCodeItemWidth, _styledComponents.codeInputTokens.smallCodeItemHeight, _styledComponents.codeInputTokens.codeItemCircleBorderWidth, _styledComponents.codeInputTokens.codeItemCircleSize),
+      m: /*#__PURE__*/(0, _styledComponents.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.75rem;\n                ", ": 0.5rem;\n\n                ", ": 0.75rem;\n\n                ", ": var(--plasma-typo-dspl-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-bold-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n\n                ", ": 5.5rem;\n                ", ": 5.75rem;\n\n                ", ": 4.5rem;\n                ", ": 4.75rem;\n\n                ", ": 3.5rem;\n                ", ": 3.75rem;\n\n                ", ": var(--plasma-typo-h4-font-family);\n                ", ": var(--plasma-typo-h4-font-size);\n                ", ": var(--plasma-typo-h4-font-style);\n                ", ": var(--plasma-typo-h4-font-weight);\n                ", ": var(--plasma-typo-h4-letter-spacing);\n                ", ": var(--plasma-typo-h4-line-height);\n\n                ", ": 3.5rem;\n                ", ": 5.75rem;\n\n                ", ": 3rem;\n                ", ": 4.75rem;\n\n                ", ": 2.25rem;\n                ", ": 3.75rem;\n\n                ", ": 0.094rem;\n                ", ": 1rem;\n            "])), _styledComponents.codeInputTokens.captionGap, _styledComponents.codeInputTokens.codeItemsGap, _styledComponents.codeInputTokens.separatorWidth, _styledComponents.codeInputTokens.fontFamily, _styledComponents.codeInputTokens.fontStyle, _styledComponents.codeInputTokens.fontWeight, _styledComponents.codeInputTokens.letterSpacing, _styledComponents.codeInputTokens.largeFontSize, _styledComponents.codeInputTokens.largeLineHeight, _styledComponents.codeInputTokens.mediumFontSize, _styledComponents.codeInputTokens.mediumLineHeight, _styledComponents.codeInputTokens.smallFontSize, _styledComponents.codeInputTokens.smallLineHeight, _styledComponents.codeInputTokens.captionFontFamily, _styledComponents.codeInputTokens.captionFontSize, _styledComponents.codeInputTokens.captionFontStyle, _styledComponents.codeInputTokens.captionFontWeight, _styledComponents.codeInputTokens.captionLetterSpacing, _styledComponents.codeInputTokens.captionLineHeight, _styledComponents.codeInputTokens.largeCodeItemWidth, _styledComponents.codeInputTokens.largeCodeItemHeight, _styledComponents.codeInputTokens.mediumCodeItemWidth, _styledComponents.codeInputTokens.mediumCodeItemHeight, _styledComponents.codeInputTokens.smallCodeItemWidth, _styledComponents.codeInputTokens.smallCodeItemHeight, _styledComponents.codeInputTokens.codeItemCircleBorderWidth, _styledComponents.codeInputTokens.codeItemCircleSize),
+      s: /*#__PURE__*/(0, _styledComponents.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 1.5rem;\n                ", ": 0.25rem;\n\n                ", ": 0.5rem;\n\n                ", ": var(--plasma-typo-dspl-s-font-family);\n                ", ": var(--plasma-typo-body-s-font-style);\n                ", ": var(--plasma-typo-body-s-bold-font-weight);\n                ", ": var(--plasma-typo-body-s-letter-spacing);\n\n                ", ": 4rem;\n                ", ": 4.25rem;\n\n                ", ": 3rem;\n                ", ": 3.25rem;\n\n                ", ": 2.5rem;\n                ", ": 2.75rem;\n\n                ", ": var(--plasma-typo-h5-font-family);\n                ", ": var(--plasma-typo-h5-font-size);\n                ", ": var(--plasma-typo-h5-font-style);\n                ", ": var(--plasma-typo-h5-font-weight);\n                ", ": var(--plasma-typo-h5-letter-spacing);\n                ", ": var(--plasma-typo-h5-line-height);\n\n                ", ": 2.5rem;\n                ", ": 4.25rem;\n\n                ", ": 2rem;\n                ", ": 3.25rem;\n\n                ", ": 1.625rem;\n                ", ": 2.75rem;\n\n                ", ": 0.063rem;\n                ", ": 0.75rem;\n            "])), _styledComponents.codeInputTokens.captionGap, _styledComponents.codeInputTokens.codeItemsGap, _styledComponents.codeInputTokens.separatorWidth, _styledComponents.codeInputTokens.fontFamily, _styledComponents.codeInputTokens.fontStyle, _styledComponents.codeInputTokens.fontWeight, _styledComponents.codeInputTokens.letterSpacing, _styledComponents.codeInputTokens.largeFontSize, _styledComponents.codeInputTokens.largeLineHeight, _styledComponents.codeInputTokens.mediumFontSize, _styledComponents.codeInputTokens.mediumLineHeight, _styledComponents.codeInputTokens.smallFontSize, _styledComponents.codeInputTokens.smallLineHeight, _styledComponents.codeInputTokens.captionFontFamily, _styledComponents.codeInputTokens.captionFontSize, _styledComponents.codeInputTokens.captionFontStyle, _styledComponents.codeInputTokens.captionFontWeight, _styledComponents.codeInputTokens.captionLetterSpacing, _styledComponents.codeInputTokens.captionLineHeight, _styledComponents.codeInputTokens.largeCodeItemWidth, _styledComponents.codeInputTokens.largeCodeItemHeight, _styledComponents.codeInputTokens.mediumCodeItemWidth, _styledComponents.codeInputTokens.mediumCodeItemHeight, _styledComponents.codeInputTokens.smallCodeItemWidth, _styledComponents.codeInputTokens.smallCodeItemHeight, _styledComponents.codeInputTokens.codeItemCircleBorderWidth, _styledComponents.codeInputTokens.codeItemCircleSize)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": 0.4;\n            "])), _styledComponents.codeInputTokens.disabledOpacity)
+    }
+  }
+};

package/components/CodeInput/CodeInput.d.ts

@@ -0,0 +1,35 @@
+/**
+ * CodeInput
+ */
+export declare const CodeInput: import("react").FunctionComponent<import("@salutejs/plasma-new-hope/types/engines/types").PropsType<{
+    view: {
+        default: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+    };
+    size: {
+        l: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        m: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+        s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+    };
+    disabled: {
+        true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
+    };
+}> & {
+    value?: string;
+    placeholder?: string;
+    autoFocus?: boolean;
+    codeLength?: 4 | 5 | 6;
+    caption?: React.ReactNode;
+    captionAlign?: "left" | "center";
+    hidden?: boolean;
+    view?: string;
+    size?: string;
+    disabled?: boolean;
+    isError?: boolean;
+    width?: string | number;
+    setIsError?: React.Dispatch<React.SetStateAction<boolean>>;
+    allowedSymbols?: string | RegExp;
+    itemErrorBehavior?: import("@salutejs/plasma-new-hope/types/components/CodeInput/CodeInput.types").ItemErrorBehavior;
+    codeErrorBehavior?: import("@salutejs/plasma-new-hope/types/components/CodeInput/CodeInput.types").CodeErrorBehavior;
+    onChange?: (value: string) => void;
+    onFullCodeEnter?: (code: string) => void;
+} & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-label" | "autoComplete"> & Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange"> & import("react").RefAttributes<HTMLInputElement>>;

package/components/CodeInput/CodeInput.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeInput = void 0;
+var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
+var _CodeInput = /*#__PURE__*/require("./CodeInput.config");
+var mergedConfig = /*#__PURE__*/(0, _styledComponents.mergeConfig)(_styledComponents.codeInputConfig, _CodeInput.config);
+var CodeInputComponent = /*#__PURE__*/(0, _styledComponents.component)(mergedConfig);
+
+/**
+ * CodeInput
+ */
+var CodeInput = exports.CodeInput = CodeInputComponent;

package/components/CodeInput/index.d.ts

@@ -0,0 +1 @@
+export { CodeInput } from './CodeInput';

package/components/CodeInput/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CodeInput", {
+  enumerable: true,
+  get: function get() {
+    return _CodeInput.CodeInput;
+  }
+});
+var _CodeInput = /*#__PURE__*/require("./CodeInput");