@salutejs/plasma-new-hope 0.325.0-canary.1954.15277675821.0 → 0.325.0-canary.1967.15291487889.0

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

@@ -0,0 +1,25 @@
+import { css } from 'styled-components';
+import { codeFieldTokens as tokens } from "../../../../components/CodeField";
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l',
+    shape: 'default'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-negative);"], tokens.caretColor, tokens.captionColor, tokens.captionColorError, tokens.codeColor, tokens.codeColorError, tokens.backgroundColor, tokens.backgroundColorHover, tokens.backgroundColorFocus, tokens.backgroundErrorColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":0.875rem;", ":0.125rem;", ":0.25rem;", ":2.75rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.875rem;", ":0.375rem;", ":0.875rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.codeItemWidth, tokens.codeItemHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.borderRadius, tokens.borderRadiusSegmented, tokens.segmentedSideBorderRadius),
+      m: /*#__PURE__*/css(["", ":0.75rem;", ":0.125rem;", ":0.25rem;", ":2.375rem;", ":3rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":0.25rem;", ":0.75rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.codeItemWidth, tokens.codeItemHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.borderRadius, tokens.borderRadiusSegmented, tokens.segmentedSideBorderRadius)
+    },
+    shape: {
+      "default": /*#__PURE__*/css([""]),
+      segmented: /*#__PURE__*/css([""])
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
+    }
+  }
+};

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

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

package/styled-components/es/examples/plasma_b2c/components/CodeField/CodeField.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 { CodeField } from './CodeField';
+import { config } from './CodeField.config';
+
+const onChange = action('onChange');
+const onFullCodeEnter = action('onFullCodeEnter');
+
+const { views, sizes } = getConfigVariations(config);
+const codeLengths = [4, 5, 6];
+const shapes = ['default', 'segmented'];
+const captionAlignVariants = ['left', 'center'];
+const itemErrorBehaviorVariants = ['remove-symbol', 'keep', 'forbid-enter'];
+const codeErrorBehaviorVariants = ['remove-code', 'keep'];
+
+const meta: Meta<typeof CodeField> = {
+    title: 'b2c/Data Entry/CodeField',
+    component: CodeField,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        shape: {
+            options: shapes,
+            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 CodeField>;
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const [value, setValue] = useState('');
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+        onChange(newValue);
+    };
+
+    return <CodeField {...args} value={value} onChange={handleChange} onFullCodeEnter={onFullCodeEnter} />;
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'm',
+        shape: 'default',
+        codeLength: 6,
+        caption: 'Caption',
+        captionAlign: 'center',
+        width: '',
+        isError: false,
+        itemErrorBehavior: 'remove-symbol',
+        codeErrorBehavior: 'keep',
+        autoFocus: true,
+        disabled: false,
+    },
+    render: StoryDefault,
+};

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

@@ -167,12 +167,14 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
     placement?: NotificationPlacement;
 };
 
-const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
+const StoryLiveDemo = ({ timeout, placement, width, maxWidth, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
         addNotification(
             {
                 icon: <IconDisclosureRight color="inherit" />,
+                width,
+                maxWidth,
                 ...rest,
                 ...getNotificationProps(count.current),
             },
@@ -210,6 +212,8 @@ export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
         role: 'alert',
         layout: 'vertical',
         placement: 'bottom-right',
+        width: '',
+        maxWidth: '',
     },
     render: (args) => <StoryLiveDemo {...args} />,
 };

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

@@ -0,0 +1,25 @@
+import { css } from 'styled-components';
+import { codeFieldTokens as tokens } from "../../../../components/CodeField";
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l',
+    shape: 'default'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-negative);", ":var(--text-primary);", ":var(--text-negative);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-negative);"], tokens.caretColor, tokens.captionColor, tokens.captionColorError, tokens.codeColor, tokens.codeColorError, tokens.borderColor, tokens.borderColorHover, tokens.borderColorFocus, tokens.borderErrorColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":0.875rem;", ":0.125rem;", ":0.25rem;", ":2.75rem;", ":3.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.063rem;", ":0.875rem;", ":0.375rem;", ":0.875rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.codeItemWidth, tokens.codeItemHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.borderWidth, tokens.borderRadius, tokens.borderRadiusSegmented, tokens.segmentedSideBorderRadius),
+      m: /*#__PURE__*/css(["", ":0.75rem;", ":0.125rem;", ":0.25rem;", ":2.375rem;", ":3rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.063rem;", ":0.75rem;", ":0.25rem;", ":0.75rem;"], tokens.captionGap, tokens.codeItemsGap, tokens.separatorWidth, tokens.codeItemWidth, tokens.codeItemHeight, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.captionFontFamily, tokens.captionFontSize, tokens.captionFontStyle, tokens.captionFontWeight, tokens.captionLetterSpacing, tokens.captionLineHeight, tokens.borderWidth, tokens.borderRadius, tokens.borderRadiusSegmented, tokens.segmentedSideBorderRadius)
+    },
+    shape: {
+      "default": /*#__PURE__*/css([""]),
+      segmented: /*#__PURE__*/css([""])
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
+    }
+  }
+};

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

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

package/styled-components/es/examples/plasma_web/components/CodeField/CodeField.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 { CodeField } from './CodeField';
+import { config } from './CodeField.config';
+
+const onChange = action('onChange');
+const onFullCodeEnter = action('onFullCodeEnter');
+
+const { views, sizes } = getConfigVariations(config);
+const codeLengths = [4, 5, 6];
+const shapes = ['default', 'segmented'];
+const captionAlignVariants = ['left', 'center'];
+const itemErrorBehaviorVariants = ['remove-symbol', 'keep', 'forbid-enter'];
+const codeErrorBehaviorVariants = ['remove-code', 'keep'];
+
+const meta: Meta<typeof CodeField> = {
+    title: 'web/Data Entry/CodeField',
+    component: CodeField,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        shape: {
+            options: shapes,
+            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 CodeField>;
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const [value, setValue] = useState('');
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+        onChange(newValue);
+    };
+
+    return <CodeField {...args} value={value} onChange={handleChange} onFullCodeEnter={onFullCodeEnter} />;
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'm',
+        shape: 'default',
+        codeLength: 6,
+        caption: 'Caption',
+        captionAlign: 'center',
+        width: '',
+        isError: false,
+        itemErrorBehavior: 'remove-symbol',
+        codeErrorBehavior: 'keep',
+        autoFocus: true,
+        disabled: false,
+    },
+    render: StoryDefault,
+};

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

@@ -170,12 +170,14 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
     placement?: NotificationPlacement;
 };
 
-const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
+const StoryLiveDemo = ({ timeout, placement, width, maxWidth, ...rest }: StoryLiveDemoProps) => {
     const count = useRef(0);
     const handleClick = useCallback(() => {
         addNotification(
             {
                 icon: <IconDisclosureRight color="inherit" />,
+                width,
+                maxWidth,
                 ...rest,
                 ...getNotificationProps(count.current),
             },
@@ -213,6 +215,8 @@ export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
         role: 'alert',
         layout: 'vertical',
         placement: 'bottom-right',
+        width: '',
+        maxWidth: '',
     },
     render: (args) => <StoryLiveDemo {...args} />,
 };

package/styled-components/es/index.js

@@ -72,10 +72,9 @@ export * from "./components/Tree";
 export * from "./components/Rating";
 export * from "./components/Note";
 export * from "./components/Table";
-export * from "./components/List";
 export * from "./components/LinkButton";
 export * from "./components/NumberFormat";
 export * from "./components/Toast/ToastNew";
 export * from "./components/Carousel";
 export * from "./components/PaginationDots";
-export * from "./components/List";
+export * from "./components/CodeField";

package/types/components/CodeField/CodeField.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { RootProps } from '../../../src/engines';
+import type { CodeFieldProps } from './CodeField.types';
+export declare const codeFieldRoot: (Root: RootProps<HTMLDivElement, CodeFieldProps>) => React.ForwardRefExoticComponent<{
+    value?: string | undefined;
+    placeholder?: string | undefined;
+    autoFocus?: boolean | undefined;
+    codeLength?: 4 | 6 | 5 | undefined;
+    caption?: React.ReactNode;
+    captionAlign?: "center" | "left" | undefined;
+    width?: string | number | undefined;
+    shape?: "default" | "segmented" | undefined;
+    view?: string | undefined;
+    size?: string | undefined;
+    disabled?: boolean | undefined;
+    isError?: boolean | undefined;
+    setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+    allowedSymbols?: string | RegExp | undefined;
+    itemErrorBehavior?: import("./CodeField.types").ItemErrorBehavior | undefined;
+    codeErrorBehavior?: import("./CodeField.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 codeFieldConfig: {
+    name: string;
+    tag: string;
+    layout: (Root: RootProps<HTMLDivElement, CodeFieldProps>) => React.ForwardRefExoticComponent<{
+        value?: string | undefined;
+        placeholder?: string | undefined;
+        autoFocus?: boolean | undefined;
+        codeLength?: 4 | 6 | 5 | undefined;
+        caption?: React.ReactNode;
+        captionAlign?: "center" | "left" | undefined;
+        width?: string | number | undefined;
+        shape?: "default" | "segmented" | undefined;
+        view?: string | undefined;
+        size?: string | undefined;
+        disabled?: boolean | undefined;
+        isError?: boolean | undefined;
+        setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+        allowedSymbols?: string | RegExp | undefined;
+        itemErrorBehavior?: import("./CodeField.types").ItemErrorBehavior | undefined;
+        codeErrorBehavior?: import("./CodeField.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;
+        };
+        shape: {
+            css: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
+    };
+    defaults: {
+        size: string;
+        view: string;
+        shape: string;
+    };
+};
+//# sourceMappingURL=CodeField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeField.d.ts","sourceRoot":"","sources":["../../../src/components/CodeField/CodeField.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;AAUxD,eAAO,MAAM,aAAa,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;sLAoRxE,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBAtRQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+S5E,CAAC"}

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

@@ -0,0 +1,11 @@
+/// <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> & Record<never, unknown>>;
+export declare const CaptionWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    captionAlign: 'left' | 'center';
+    widthValue?: string | undefined;
+}>;
+//# sourceMappingURL=CodeField.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeField.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CodeField/CodeField.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,8KAQrB,CAAC;AAEF,eAAO,MAAM,cAAc;kBAA8B,MAAM,GAAG,QAAQ;;EAKzE,CAAC"}

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

@@ -0,0 +1,52 @@
+export declare const classes: {
+    itemError: string;
+    itemErrorAnimation: string;
+    itemErrorFade: string;
+    captionError: string;
+    codeError: string;
+    codeErrorAnimation: string;
+    codeErrorFade: string;
+    captionAlignLeft: string;
+    hoverEnabled: string;
+    segmented: string;
+    default: string;
+    disabled: string;
+};
+export declare const tokens: {
+    captionGap: string;
+    codeItemsGap: string;
+    separatorWidth: string;
+    codeItemWidth: string;
+    codeItemHeight: string;
+    fontFamily: string;
+    fontStyle: string;
+    fontSize: string;
+    fontWeight: string;
+    letterSpacing: string;
+    lineHeight: 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;
+    caretColor: string;
+    disabledOpacity: string;
+};
+//# sourceMappingURL=CodeField.tokens.d.ts.map

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

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

package/types/components/CodeField/CodeField.types.d.ts

@@ -0,0 +1,93 @@
+import type { Dispatch, HTMLAttributes, InputHTMLAttributes, ReactNode, SetStateAction } from 'react';
+export declare type ItemErrorBehavior = 'remove-symbol' | 'keep' | 'forbid-enter';
+export declare type CodeErrorBehavior = 'remove-code' | 'keep';
+export declare type CodeFieldProps = {
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Строка равная, длине кода или же один символ,
+     * для отображения в качестве placeholder
+     */
+    placeholder?: string;
+    /**
+     * Автофокус на компоненте
+     */
+    autoFocus?: boolean;
+    /**
+     * Длина кода
+     * @default 6
+     */
+    codeLength?: 4 | 5 | 6;
+    /**
+     * Подпись к компоненту
+     */
+    caption?: ReactNode;
+    /**
+     * Выравнивание подписи
+     * @default left
+     */
+    captionAlign?: 'left' | 'center';
+    /**
+     * Ширина компонента
+     * @description
+     * Значение может принимать строку с единицой измерения CSS (px, rem и тд.).
+     * Если передано число без единицы измерения - рассчитывается в rem.
+     */
+    width?: string | number;
+    /**
+     * Форма компонента
+     * @default default
+     */
+    shape?: 'default' | 'segmented';
+    /**
+     * Вид компонента
+     */
+    view?: string;
+    /**
+     * Размер компонента
+     */
+    size?: string;
+    /**
+     * Компонент не активен
+     */
+    disabled?: boolean;
+    /**
+     * Флаг ошибки кода
+     */
+    isError?: boolean;
+    /**
+     * Колбек для установки флага ошибки
+     */
+    setIsError?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Регулярное выражение или строка, по которой проверяется символ при вводе
+     * @default '^\\d+$' - только цифры
+     */
+    allowedSymbols?: string | RegExp;
+    /**
+     * Поведение элемента поля ввода, при вводе некорректного значения
+     * - `remove-symbol` - проигрывается анимация ошибки, значение элемента очищается
+     * - `keep` - проигрывается анимация ошибки, значение остается
+     * - `forbid-enter` - запрещается ввод некорректного значения
+     * @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=CodeField.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CodeField.types.d.ts","sourceRoot":"","sources":["../../../src/components/CodeField/CodeField.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,cAAc,CAAC;AAC1E,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;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;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/CodeField/index.d.ts

@@ -0,0 +1,4 @@
+export { codeFieldRoot, codeFieldConfig } from './CodeField';
+export { tokens as codeFieldTokens, classes as codeFieldClasses } from './CodeField.tokens';
+export { ONLY_DIGITS_PATTERN, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN } from './utils/constants';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CodeField/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;AAC5F,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC"}

package/types/components/CodeField/utils/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const ONLY_DIGITS_PATTERN = "^\\d+$";
+export declare const ONLY_CHARS_PATTERN = "^[a-zA-Z]+$";
+export declare const ONLY_DIGITS_AND_CHARS_PATTERN = "^[a-zA-Z0-9]+$";
+export declare const FORBIDDEN_KEYS: string[];
+export declare const BACKSPACE_KEY = "Backspace";
+export declare const ANIMATION_TIMEOUT = 300;
+//# sourceMappingURL=constants.d.ts.map

package/types/components/CodeField/utils/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeField/utils/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAC5C,eAAO,MAAM,kBAAkB,gBAAgB,CAAC;AAChD,eAAO,MAAM,6BAA6B,mBAAmB,CAAC;AAE9D,eAAO,MAAM,cAAc,UAAgE,CAAC;AAC5F,eAAO,MAAM,aAAa,cAAc,CAAC;AAEzC,eAAO,MAAM,iBAAiB,MAAM,CAAC"}

package/types/components/CodeField/utils/handleCodeError.d.ts

@@ -0,0 +1,15 @@
+import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import type { CodeErrorBehavior } from '../CodeField.types';
+declare type ValidateSymbolsArgs = {
+    codeLength: number;
+    codeErrorBehavior: CodeErrorBehavior;
+    currentCode: Array<string>;
+    inputContainerRef: MutableRefObject<HTMLDivElement | null>;
+    inputRefs: MutableRefObject<Array<HTMLInputElement | null>>;
+    captionRef: MutableRefObject<HTMLDivElement | null>;
+    setCode: Dispatch<SetStateAction<Array<string>>>;
+    codeSetter: (newCode: Array<string>) => void;
+};
+export declare const handleCodeError: ({ codeLength, codeErrorBehavior, currentCode, inputRefs, inputContainerRef, captionRef, setCode, codeSetter, }: ValidateSymbolsArgs) => void;
+export {};
+//# sourceMappingURL=handleCodeError.d.ts.map

package/types/components/CodeField/utils/handleCodeError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleCodeError.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeField/utils/handleCodeError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAM5D,aAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B,iBAAiB,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3D,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC,CAAC;IAC5D,UAAU,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACjD,UAAU,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,eAAe,mHASzB,mBAAmB,SA8CrB,CAAC"}

package/types/components/CodeField/utils/handleItemError.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import type { ItemErrorBehavior } from '../CodeField.types';
+declare type ValidateSymbolsArgs = {
+    currentSymbol: string;
+    itemErrorBehavior: ItemErrorBehavior;
+    index: number;
+    newCode: Array<string>;
+    inputRefs: MutableRefObject<Array<HTMLInputElement | null>>;
+    setCode: Dispatch<SetStateAction<Array<string>>>;
+    codeSetter: (newCode: Array<string>) => void;
+};
+export declare const handleItemError: ({ currentSymbol, itemErrorBehavior, index, newCode, inputRefs, setCode, codeSetter, }: ValidateSymbolsArgs) => void;
+export {};
+//# sourceMappingURL=handleItemError.d.ts.map