@salutejs/plasma-new-hope 0.325.0 → 0.326.0-canary.1973.15343275842.0

package/styled-components/es/components/CodeInput/utils/initialValuesHelper.js

@@ -0,0 +1,24 @@
+export var getFieldPattern = function getFieldPattern(allowedSymbols) {
+  if (!allowedSymbols) {
+    return null;
+  }
+  if (typeof allowedSymbols === 'string') {
+    return new RegExp(allowedSymbols, 'g');
+  }
+  return allowedSymbols;
+};
+export var getCodeValue = function getCodeValue(codeLength, value) {
+  if (!value.length) {
+    return new Array(codeLength).fill('');
+  }
+  return value.slice(0, codeLength).split('');
+};
+export var getPlaceholderValue = function getPlaceholderValue(codeLength, placeholder) {
+  if (!placeholder || typeof placeholder !== 'string') {
+    return null;
+  }
+  if (placeholder.length === 1) {
+    return Array(codeLength).fill(placeholder);
+  }
+  return placeholder.slice(0, codeLength).split('');
+};

package/styled-components/es/components/CodeInput/variations/_disabled/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { tokens } from "../../CodeInput.tokens";
+export var base = /*#__PURE__*/css(["&&[disabled]{opacity:var(", ");cursor:not-allowed;& > *{pointer-events:none;}}"], tokens.disabledOpacity);

package/styled-components/es/components/CodeInput/variations/_disabled/tokens.json

@@ -0,0 +1,4 @@
+{
+    "type": "boolean",
+    "tokens": ["--plasma-codeinput-disabled-opacity"]
+}

package/styled-components/es/components/CodeInput/variations/_size/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { CaptionWrapper, CodeGroup, CodeWrapper, ItemInput } from "../../CodeInput.styles";
+import { tokens, classes } from "../../CodeInput.tokens";
+export var base = /*#__PURE__*/css(["gap:var(", ");", ",", "{gap:var(", ");}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}&& .", "{", "{width:var(", ");height:var(", ");font-size:var(", ");line-height:var(", ");}}", "{font-family:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");}", "{font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}"], tokens.captionGap, CodeWrapper, CodeGroup, tokens.codeItemsGap, classes.largeScreen, ItemInput, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, classes.mediumScreen, ItemInput, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, classes.smallScreen, ItemInput, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, ItemInput, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, CaptionWrapper, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight);

package/styled-components/es/components/CodeInput/variations/_size/tokens.json

@@ -0,0 +1,19 @@
+[
+    "--plasma-codeinput-caption-gap",
+    "--plasma-codeinput-code-item-gap",
+    "--plasma-codeinput-separator-width",
+    "--plasma-codeinput-item-width",
+    "--plasma-codeinput-item-height",
+    "--plasma-codeinput-font-family",
+    "--plasma-codeinput-font-style",
+    "--plasma-codeinput-font-size",
+    "--plasma-codeinput-font-weight",
+    "--plasma-codeinput-letter-spacing",
+    "--plasma-codeinput-line-height",
+    "--plasma-codeinput-caption-font-family",
+    "--plasma-codeinput-caption-font-style",
+    "--plasma-codeinput-caption-font-size",
+    "--plasma-codeinput-caption-font-weight",
+    "--plasma-codeinput-caption-letter-spacing",
+    "--plasma-codeinput-caption-line-height"
+]

package/styled-components/es/components/CodeInput/variations/_view/base.js

@@ -0,0 +1,4 @@
+import { css } from 'styled-components';
+import { CaptionWrapper, ItemInput, ItemCircle } from "../../CodeInput.styles";
+import { classes, tokens } from "../../CodeInput.tokens";
+export var base = /*#__PURE__*/css(["", "{color:var(", ");&.", "{color:var(", ");}}", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}&:hover{.", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&:focus-within{", ":focus-within{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&& .", "{animation:shakingError 0.3s forwards;}&& .", "{", "{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}", "{border:var(", ") solid var(", ");&.", "{background-color:var(", ");}}&:focus-within{", "{background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");}}&.", "{", "{animation:fadeError 0.3s forwards;}}}&& .", "{animation:shakingError 0.3s forwards;}&& .", ",&& .", ":focus-within{color:var(", ");background-color:var(", ");box-shadow:inset 0 0 0 var(", ") var(", ");&.", "{animation:shakingError 0.3s forwards fadeError 0.3s forwards;}}@keyframes shakingError{14%{transform:translateX(-0.125rem);}28%{transform:translateX(0.125rem);}42%{transform:translateX(-0.125rem);}57%{transform:translateX(0.125rem);}71%{transform:translateX(-0.125rem);}85%{transform:translateX(0.125rem);}100%{transform:translateX(-0.125rem);}}@keyframes fadeError{50%{color:var(", ");}100%{color:transparent;}}"], CaptionWrapper, tokens.captionColor, classes.captionError, tokens.captionColorError, ItemInput, tokens.codeColor, tokens.backgroundColor, tokens.borderWidth, tokens.borderColor, classes.hoverEnabled, tokens.backgroundColorHover, tokens.borderWidth, tokens.borderColorHover, ItemInput, tokens.backgroundColorFocus, tokens.borderWidth, tokens.borderColorFocus, classes.codeErrorAnimation, classes.codeError, ItemInput, tokens.codeColorError, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, ItemCircle, tokens.codeItemCircleBorderWidth, tokens.codeColorError, classes.itemCirlceFilled, tokens.codeColorError, ItemInput, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, classes.codeErrorFade, ItemInput, classes.itemErrorAnimation, classes.itemError, classes.itemError, tokens.codeColorError, tokens.backgroundErrorColor, tokens.borderWidth, tokens.borderErrorColor, classes.codeErrorFade, tokens.codeColorError);

package/styled-components/es/components/CodeInput/variations/_view/tokens.json

@@ -0,0 +1 @@
+[]

package/styled-components/es/examples/plasma_b2c/components/CodeInput/CodeInput.config.js

@@ -0,0 +1,21 @@
+import { css } from 'styled-components';
+import { codeInputTokens as tokens } from "../../../../components/CodeInput";
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);"], tokens.captionColor, tokens.captionColorError, tokens.codeColor, tokens.codeColorError)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":2.5rem;", ":0.75rem;", ":1rem;", ":var(--plasma-typo-dspl-l-font-family);", ":var(--plasma-typo-dspl-l-font-style);", ":var(--plasma-typo-dspl-l-bold-font-weight);", ":var(--plasma-typo-dspl-l-letter-spacing);", ":8rem;", ":8rem;", ":7rem;", ":7rem;", ":5.5rem;", ":5.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":5rem;", ":8rem;", ":4.5rem;", ":7rem;", ":3.5rem;", ":5.75rem;", ":0.125rem;", ":1.5rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize),
+      m: /*#__PURE__*/css(["", ":1.75rem;", ":0.5rem;", ":1rem;", ":var(--plasma-typo-dspl-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":5.5rem;", ":5.75rem;", ":4.5rem;", ":4.75rem;", ":3.5rem;", ":3.75rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":3.5rem;", ":5.75rem;", ":3rem;", ":4.75rem;", ":2.25rem;", ":3.75rem;", ":0.094rem;", ":1rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize),
+      s: /*#__PURE__*/css(["", ":1.5rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-dspl-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":4rem;", ":4.25rem;", ":3rem;", ":3.25rem;", ":2.5rem;", ":2.75rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":2.5rem;", ":4.25rem;", ":2rem;", ":3.25rem;", ":1.625rem;", ":2.75rem;", ":0.063rem;", ":0.75rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
+    }
+  }
+};

package/styled-components/es/examples/plasma_b2c/components/CodeInput/CodeInput.js

@@ -0,0 +1,5 @@
+import { codeInputConfig } from "../../../../components/CodeInput";
+import { component, mergeConfig } from "../../../../engines";
+import { config } from "./CodeInput.config";
+var mergedConfig = /*#__PURE__*/mergeConfig(codeInputConfig, config);
+export var CodeInput = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_b2c/components/CodeInput/CodeInput.stories.tsx

@@ -0,0 +1,107 @@
+import React, { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { getConfigVariations } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { CodeInput } from './CodeInput';
+import { config } from './CodeInput.config';
+
+const onChange = action('onChange');
+const onFullCodeEnter = action('onFullCodeEnter');
+
+const { views, sizes } = getConfigVariations(config);
+const codeLengths = [4, 5, 6];
+const captionAlignVariants = ['left', 'center'];
+const itemErrorBehaviorVariants = ['remove-symbol', 'keep', 'forbid-enter'];
+const codeErrorBehaviorVariants = ['remove-code', 'keep'];
+
+const meta: Meta<typeof CodeInput> = {
+    title: 'b2c/Data Entry/CodeInput',
+    component: CodeInput,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        screen: {
+            options: ['large', 'medium', 'small'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        captionAlign: {
+            options: captionAlignVariants,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        codeLength: {
+            options: codeLengths,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        itemErrorBehavior: {
+            options: itemErrorBehaviorVariants,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        codeErrorBehavior: {
+            options: codeErrorBehaviorVariants,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    parameters: {
+        controls: {
+            exclude: ['view'],
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof CodeInput>;
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const [value, setValue] = useState('');
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+        onChange(newValue);
+    };
+
+    return <CodeInput {...args} value={value} onChange={handleChange} onFullCodeEnter={onFullCodeEnter} />;
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'm',
+        codeLength: 6,
+        caption: 'Caption',
+        captionAlign: 'center',
+        width: '',
+        screen: 'medium',
+        isError: false,
+        itemErrorBehavior: 'remove-symbol',
+        codeErrorBehavior: 'remove-code',
+        autoFocus: true,
+        disabled: false,
+        hidden: false,
+    },
+    render: StoryDefault,
+};

package/styled-components/es/examples/plasma_web/components/CodeInput/CodeInput.config.js

@@ -0,0 +1,21 @@
+import { css } from 'styled-components';
+import { codeInputTokens as tokens } from "../../../../components/CodeInput";
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);"], tokens.captionColor, tokens.captionColorError, tokens.codeColor, tokens.codeColorError)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":2.5rem;", ":0.75rem;", ":1rem;", ":var(--plasma-typo-dspl-l-font-family);", ":var(--plasma-typo-dspl-l-font-style);", ":var(--plasma-typo-dspl-l-bold-font-weight);", ":var(--plasma-typo-dspl-l-letter-spacing);", ":8rem;", ":8rem;", ":7rem;", ":7rem;", ":5.5rem;", ":5.75rem;", ":var(--plasma-typo-h3-font-family);", ":var(--plasma-typo-h3-font-size);", ":var(--plasma-typo-h3-font-style);", ":var(--plasma-typo-h3-font-weight);", ":var(--plasma-typo-h3-letter-spacing);", ":var(--plasma-typo-h3-line-height);", ":5rem;", ":8rem;", ":4.5rem;", ":7rem;", ":3.5rem;", ":5.75rem;", ":0.125rem;", ":1.5rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize),
+      m: /*#__PURE__*/css(["", ":1.75rem;", ":0.5rem;", ":1rem;", ":var(--plasma-typo-dspl-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":5.5rem;", ":5.75rem;", ":4.5rem;", ":4.75rem;", ":3.5rem;", ":3.75rem;", ":var(--plasma-typo-h4-font-family);", ":var(--plasma-typo-h4-font-size);", ":var(--plasma-typo-h4-font-style);", ":var(--plasma-typo-h4-font-weight);", ":var(--plasma-typo-h4-letter-spacing);", ":var(--plasma-typo-h4-line-height);", ":3.5rem;", ":5.75rem;", ":3rem;", ":4.75rem;", ":2.25rem;", ":3.75rem;", ":0.09375rem;", ":1rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize),
+      s: /*#__PURE__*/css(["", ":1.5rem;", ":0.25rem;", ":0.5rem;", ":var(--plasma-typo-dspl-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":4rem;", ":4.25rem;", ":3rem;", ":3.25rem;", ":2.5rem;", ":2.75rem;", ":var(--plasma-typo-h5-font-family);", ":var(--plasma-typo-h5-font-size);", ":var(--plasma-typo-h5-font-style);", ":var(--plasma-typo-h5-font-weight);", ":var(--plasma-typo-h5-letter-spacing);", ":var(--plasma-typo-h5-line-height);", ":2.5rem;", ":4.25rem;", ":2rem;", ":3.25rem;", ":1.625rem;", ":2.75rem;", ":0.0625rem;", ":0.75rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.fontFamily, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.largeScreenFontSize, tokens.largeScreenLineHeight, tokens.mediumScreenFontSize, tokens.mediumScreenLineHeight, tokens.smallScreenFontSize, tokens.smallScreenLineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.codeItemLargeWidth, tokens.codeItemLargeHeight, tokens.codeItemMediumWidth, tokens.codeItemMediumHeight, tokens.codeItemSmallWidth, tokens.codeItemSmallHeight, tokens.codeItemCircleBorderWidth, tokens.codeItemCircleSize)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
+    }
+  }
+};

package/styled-components/es/examples/plasma_web/components/CodeInput/CodeInput.js

@@ -0,0 +1,5 @@
+import { codeInputConfig } from "../../../../components/CodeInput";
+import { component, mergeConfig } from "../../../../engines";
+import { config } from "./CodeInput.config";
+var mergedConfig = /*#__PURE__*/mergeConfig(codeInputConfig, config);
+export var CodeInput = /*#__PURE__*/component(mergedConfig);

package/styled-components/es/examples/plasma_web/components/CodeInput/CodeInput.stories.tsx

@@ -0,0 +1,107 @@
+import React, { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { getConfigVariations } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { CodeInput } from './CodeInput';
+import { config } from './CodeInput.config';
+
+const onChange = action('onChange');
+const onFullCodeEnter = action('onFullCodeEnter');
+
+const { views, sizes } = getConfigVariations(config);
+const codeLengths = [4, 5, 6];
+const captionAlignVariants = ['left', 'center'];
+const itemErrorBehaviorVariants = ['remove-symbol', 'keep', 'forbid-enter'];
+const codeErrorBehaviorVariants = ['remove-code', 'keep'];
+
+const meta: Meta<typeof CodeInput> = {
+    title: 'web/Data Entry/CodeInput',
+    component: CodeInput,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        screen: {
+            options: ['large', 'medium', 'small'],
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        captionAlign: {
+            options: captionAlignVariants,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        codeLength: {
+            options: codeLengths,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        itemErrorBehavior: {
+            options: itemErrorBehaviorVariants,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        codeErrorBehavior: {
+            options: codeErrorBehaviorVariants,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+    parameters: {
+        controls: {
+            exclude: ['view'],
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof CodeInput>;
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const [value, setValue] = useState('');
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+        onChange(newValue);
+    };
+
+    return <CodeInput {...args} value={value} onChange={handleChange} onFullCodeEnter={onFullCodeEnter} />;
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'm',
+        codeLength: 6,
+        caption: 'Caption',
+        captionAlign: 'center',
+        width: '',
+        screen: 'medium',
+        isError: false,
+        itemErrorBehavior: 'remove-symbol',
+        codeErrorBehavior: 'remove-code',
+        autoFocus: true,
+        disabled: false,
+        hidden: false,
+    },
+    render: StoryDefault,
+};

package/styled-components/es/index.js

@@ -78,5 +78,6 @@ export * from "./components/NumberFormat";
 export * from "./components/Toast/ToastNew";
 export * from "./components/Carousel";
 export * from "./components/PaginationDots";
+export * from "./components/CodeInput";
 export * from "./components/CodeField";
 export * from "./components/List";

package/types/components/CodeInput/CodeInput.d.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import type { RootProps } from '../../../src/engines';
+import type { CodeInputProps } from './CodeInput.types';
+export declare const codeInputRoot: (Root: RootProps<HTMLDivElement, CodeInputProps>) => React.ForwardRefExoticComponent<{
+    value?: string | undefined;
+    placeholder?: string | undefined;
+    autoFocus?: boolean | undefined;
+    codeLength?: 4 | 6 | 5 | undefined;
+    caption?: React.ReactNode;
+    captionAlign?: "center" | "left" | undefined;
+    hidden?: boolean | undefined;
+    view?: string | undefined;
+    size?: string | undefined;
+    screen?: "small" | "medium" | "large" | undefined;
+    disabled?: boolean | undefined;
+    isError?: boolean | undefined;
+    width?: string | number | undefined;
+    setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    allowedSymbols?: string | RegExp | undefined;
+    itemErrorBehavior?: import("./CodeInput.types").ItemErrorBehavior | undefined;
+    codeErrorBehavior?: import("./CodeInput.types").CodeErrorBehavior | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onFullCodeEnter?: ((code: string) => void) | undefined;
+} & Pick<React.InputHTMLAttributes<HTMLInputElement>, "aria-label" | "autoComplete"> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLInputElement>>;
+export declare const codeInputConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, CodeInputProps>) => React.ForwardRefExoticComponent<{
+        value?: string | undefined;
+        placeholder?: string | undefined;
+        autoFocus?: boolean | undefined;
+        codeLength?: 4 | 6 | 5 | undefined;
+        caption?: React.ReactNode;
+        captionAlign?: "center" | "left" | undefined;
+        hidden?: boolean | undefined;
+        view?: string | undefined;
+        size?: string | undefined;
+        screen?: "small" | "medium" | "large" | undefined;
+        disabled?: boolean | undefined;
+        isError?: boolean | undefined;
+        width?: string | number | undefined;
+        setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+        allowedSymbols?: string | RegExp | undefined;
+        itemErrorBehavior?: import("./CodeInput.types").ItemErrorBehavior | undefined;
+        codeErrorBehavior?: import("./CodeInput.types").CodeErrorBehavior | undefined;
+        onChange?: ((value: string) => void) | undefined;
+        onFullCodeEnter?: ((code: string) => void) | undefined;
+    } & Pick<React.InputHTMLAttributes<HTMLInputElement>, "aria-label" | "autoComplete"> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLInputElement>>;
+    base: import("@linaria/core").LinariaClassName;
+    variations: {
+        view: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        size: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
+    };
+    defaults: {
+        size: string;
+        view: string;
+    };
+};
+//# sourceMappingURL=CodeInput.d.ts.map

package/types/components/CodeInput/CodeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/CodeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyE,MAAM,OAAO,CAAC;AAG9F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAI7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAkBxD,eAAO,MAAM,aAAa,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;sLAgSxE,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBAlSQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuT5E,CAAC"}

package/types/components/CodeInput/CodeInput.styles.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const CodeWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const CodeGroup: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Separator: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ItemInput: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
+    hide?: boolean | undefined;
+}>;
+export declare const ItemWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ItemCircle: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    filled?: boolean | undefined;
+}>;
+export declare const CaptionWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    captionAlign: 'left' | 'center';
+    widthValue?: string | undefined;
+}>;
+//# sourceMappingURL=CodeInput.styles.d.ts.map

package/types/components/CodeInput/CodeInput.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/CodeInput.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,IAAI,0CAUhB,CAAC;AAEF,eAAO,MAAM,WAAW,qKAGvB,CAAC;AAEF,eAAO,MAAM,SAAS,qKAGrB,CAAC;AAEF,eAAO,MAAM,SAAS,qKAErB,CAAC;AAEF,eAAO,MAAM,SAAS;;EAWrB,CAAC;AAEF,eAAO,MAAM,WAAW,qKAEvB,CAAC;AAEF,eAAO,MAAM,UAAU;;EActB,CAAC;AAEF,eAAO,MAAM,cAAc;kBAA8B,MAAM,GAAG,QAAQ;;EAKzE,CAAC"}

package/types/components/CodeInput/CodeInput.tokens.d.ts

@@ -0,0 +1,65 @@
+export declare const classes: {
+    itemError: string;
+    itemErrorAnimation: string;
+    itemErrorFade: string;
+    itemCirlceFilled: string;
+    captionError: string;
+    codeError: string;
+    codeErrorAnimation: string;
+    codeErrorFade: string;
+    captionAlignLeft: string;
+    hoverEnabled: string;
+    segmented: string;
+    default: string;
+    largeScreen: string;
+    mediumScreen: string;
+    smallScreen: string;
+    disabled: string;
+};
+export declare const tokens: {
+    captionGap: string;
+    codeItemsGap: string;
+    separatorWidth: string;
+    codeItemLargeWidth: string;
+    codeItemLargeHeight: string;
+    codeItemMediumWidth: string;
+    codeItemMediumHeight: string;
+    codeItemSmallWidth: string;
+    codeItemSmallHeight: string;
+    codeItemCircleSize: string;
+    codeItemCircleBorderWidth: string;
+    fontStyle: string;
+    fontFamily: string;
+    fontWeight: string;
+    letterSpacing: string;
+    largeScreenFontSize: string;
+    largeScreenLineHeight: string;
+    mediumScreenFontSize: string;
+    mediumScreenLineHeight: string;
+    smallScreenFontSize: string;
+    smallScreenLineHeight: string;
+    captionFontFamily: string;
+    captionFontSize: string;
+    captionFontStyle: string;
+    captionFontWeight: string;
+    captionLetterSpacing: string;
+    captionLineHeight: string;
+    borderRadius: string;
+    borderRadiusSegmented: string;
+    segmentedSideBorderRadius: string;
+    captionColor: string;
+    captionColorError: string;
+    codeColor: string;
+    codeColorError: string;
+    backgroundColor: string;
+    backgroundColorHover: string;
+    backgroundColorFocus: string;
+    backgroundErrorColor: string;
+    borderWidth: string;
+    borderColor: string;
+    borderColorHover: string;
+    borderColorFocus: string;
+    borderErrorColor: string;
+    disabledOpacity: string;
+};
+//# sourceMappingURL=CodeInput.tokens.d.ts.map

package/types/components/CodeInput/CodeInput.tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/CodeInput.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;CAsBnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DlB,CAAC"}

package/types/components/CodeInput/CodeInput.types.d.ts

@@ -0,0 +1,96 @@
+import type { Dispatch, HTMLAttributes, InputHTMLAttributes, ReactNode, SetStateAction } from 'react';
+export declare type ItemErrorBehavior = 'remove-symbol' | 'keep' | 'remove-code' | 'forbid-enter';
+export declare type CodeErrorBehavior = 'remove-code' | 'keep';
+export declare type CodeInputProps = {
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Строка равная, длине кода или же один символ,
+     * для отображения в качестве placeholder
+     */
+    placeholder?: string;
+    /**
+     * Автофокус на компоненте
+     */
+    autoFocus?: boolean;
+    /**
+     * Длина кода
+     * @default 6
+     */
+    codeLength?: 4 | 5 | 6;
+    /**
+     * Подпись к компоненту
+     */
+    caption?: ReactNode;
+    /**
+     * Выравнивание подписи
+     * @default left
+     */
+    captionAlign?: 'left' | 'center';
+    /**
+     * Скрытые поля
+     */
+    hidden?: boolean;
+    /**
+     * Вид компонента
+     */
+    view?: string;
+    /**
+     * Размер компонента
+     */
+    size?: string;
+    /**
+     * Размер экрана
+     */
+    screen?: 'large' | 'medium' | 'small';
+    /**
+     * Компонент не активен
+     */
+    disabled?: boolean;
+    /**
+     * Флаг ошибки кода
+     */
+    isError?: boolean;
+    /**
+     * Ширина компонента
+     * @description
+     * Значение может принимать строку с единицой измерения CSS (px, rem и тд.).
+     * Если передано число без единицы измерения - рассчитывается в rem.
+     */
+    width?: string | number;
+    /**
+     * Колбек для установки флага ошибки
+     */
+    setIsError?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Регулярное выражение или строка, по которой проверяется символ при вводе
+     * @default '^\\d+$' - только цифры
+     */
+    allowedSymbols?: string | RegExp;
+    /**
+     * Поведение элемента поля ввода, при вводе некорректного значения
+     * - `remove-symbol` - проигрывается анимация ошибки, значение элемента очищается
+     * - `keep` - проигрывается анимация ошибки, значение остается
+     * - `remove-code` - проигрывается анимация ошибки, значение всего поля очищается
+     * @default 'remove-symbol'
+     */
+    itemErrorBehavior?: ItemErrorBehavior;
+    /**
+     * Поведение элемента поля ввода, при вводе некорректного значения
+     * - `remove-code` - проигрывается анимация ошибки, значение всего поля очищается
+     * - `keep` - проигрывается анимация ошибки, значение остается
+     * @default 'remove-code'
+     */
+    codeErrorBehavior?: CodeErrorBehavior;
+    /**
+     * Коллбек, вызываемый при изменении значения кода
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Коллбек, вызываемый при вводе полного значения в поле
+     */
+    onFullCodeEnter?: (code: string) => void;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-label' | 'autoComplete'> & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
+//# sourceMappingURL=CodeInput.types.d.ts.map

package/types/components/CodeInput/CodeInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/CodeInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,mBAAmB,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtG,oBAAY,iBAAiB,GAAG,eAAe,GAAG,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC;AAC1F,oBAAY,iBAAiB,GAAG,aAAa,GAAG,MAAM,CAAC;AAEvD,oBAAY,cAAc,GAAG;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/C;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,YAAY,GAAG,cAAc,CAAC,GAC1E,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC"}

package/types/components/CodeInput/index.d.ts

@@ -0,0 +1,3 @@
+export { codeInputRoot, codeInputConfig } from './CodeInput';
+export { tokens as codeInputTokens, classes as codeInputClasses } from './CodeInput.tokens';
+//# sourceMappingURL=index.d.ts.map

package/types/components/CodeInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}