@salutejs/plasma-new-hope 0.72.0-dev.0 → 0.73.0-canary.1160.8627071767.0

package/styled-components/es/examples/sds_engineer/components/TextField/TextField.config.js

@@ -0,0 +1,37 @@
+import { css } from 'styled-components';
+import { textFieldTokens as tokens, textField_labelPlacement_inner as labelPlacement_inner, textField_labelPlacement_outer as labelPlacement_outer } from '../../../../components/TextField';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'l',
+    labelPlacement: 'outer'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      // TODO заменить --surface-transparent-positive на корректный токен
+      positive: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      // // TODO заменить --surface-transparent-warning на корректный токен
+      warning: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor),
+      // // TODO заменить --surface-transparent-negative на корректный токен
+      negative: /*#__PURE__*/css(["", ":var(--plasma-colors-primary);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);"], tokens.color, tokens.backgroundColor, tokens.backgroundColorFocus, tokens.caretColor, tokens.placeholderColor, tokens.labelColor, tokens.leftHelperColor, tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.chipCloseIconColor, tokens.chipColor, tokens.chipBackground, tokens.chipColorHover, tokens.chipBackgroundHover, tokens.chipColorActive, tokens.chipBackgroundActive, tokens.chipBackgroundReadOnly, tokens.chipColorReadOnly, tokens.chipBackgroundReadOnlyHover, tokens.chipColorReadOnlyHover, tokens.chipOpacityReadonly, tokens.focusColor)
+    },
+    size: {
+      l: /*#__PURE__*/css(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":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.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.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-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      m: /*#__PURE__*/css(["", ":3rem;", ":0.875rem 1rem 0.875rem 1rem;", ":0.375rem;", ":0.75rem;", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":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-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.625rem;", ":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-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem;", ":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.375rem 0 0.125rem 0;", ":1.375rem 0 0.375rem 0;", ":0.25rem;", ":0.375rem;", ":auto;", ":2.25rem;", ":0.625rem;", ":0.875rem;", ":0.5rem;", ":0rem;", ":1.25rem;", ":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-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      s: /*#__PURE__*/css(["", ":2.5rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":0.375rem;", ":0.625rem;", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":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.5rem;", ":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.25rem;", ":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.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.25rem;", ":auto;", ":1.75rem;", ":0.5rem;", ":0.75rem;", ":0.375rem;", ":0rem;", ":1rem;", ":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);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight),
+      xs: /*#__PURE__*/css(["", ":2rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":0.375rem;", ":0.5rem;", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":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.375rem;", ":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.25rem;", ":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.3125rem 0 0 0;", ":1.0625rem 0 0.3125rem 0;", ":0.25rem;", ":0.125rem;", ":auto;", ":1.25rem;", ":0.375rem;", ":0.625rem;", ":0.25rem;", ":0rem;", ":0.75rem;", ":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);"], tokens.height, tokens.padding, tokens.paddingWithChips, tokens.borderRadius, tokens.leftContentMargin, tokens.rightContentMargin, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.labelOffset, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelFontStyle, tokens.labelFontWeight, tokens.labelLetterSpacing, tokens.labelLineHeight, tokens.leftHelperOffset, tokens.leftHelperFontFamily, tokens.leftHelperFontSize, tokens.leftHelperFontStyle, tokens.leftHelperFontWeight, tokens.leftHelperLetterSpacing, tokens.leftHelperLineHeight, tokens.labelInnerPadding, tokens.contentLabelInnerPadding, tokens.chipGap, tokens.chipBorderRadius, tokens.chipWidth, tokens.chipHeight, tokens.chipPaddingRight, tokens.chipPaddingLeft, tokens.chipClearContentMarginLeft, tokens.chipClearContentMarginRight, tokens.chipCloseIconSize, tokens.chipFontFamily, tokens.chipFontSize, tokens.chipFontStyle, tokens.chipFontWeight, tokens.chipLetterSpacing, tokens.chipLineHeight)
+    },
+    labelPlacement: {
+      inner: [labelPlacement_inner, /*#__PURE__*/css(["&.", "{", ":var(--plasma-input-label-color,var(--plasma-input-placeholder-color,var(--plasma-colors-secondary)));", ":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);}"], labelPlacement_inner, tokens.placeholderColor, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight)],
+      outer: [labelPlacement_outer, /*#__PURE__*/css(["&.", "{}"], labelPlacement_outer)]
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], tokens.disabledOpacity)
+    },
+    // TODO заменить --surface-transparent-primary на корректный токен
+    readOnly: {
+      "true": /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--surface-transparent-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);"], tokens.colorReadOnly, tokens.backgroundColorReadOnly, tokens.placeholderColorReadOnly, tokens.leftHelperColorReadOnly, tokens.labelColorReadOnly)
+    }
+  }
+};

package/styled-components/es/examples/sds_engineer/components/TextField/TextField.js

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

package/styled-components/es/examples/sds_engineer/components/TextField/TextField.stories.tsx

@@ -0,0 +1,181 @@
+import React, { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { TextField } from './TextField';
+
+const onChange = action('onChange');
+const onFocus = action('onFocus');
+const onBlur = action('onBlur');
+const onSearch = action('onSearch');
+const onChipsChange = action('onChipsChange');
+
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default', 'positive', 'warning', 'negative'];
+const labelPlacements = ['outer', 'inner'];
+
+const meta: Meta<typeof TextField> = {
+    title: 'sds_engineer/TextField',
+    component: TextField,
+    decorators: [WithTheme],
+    argTypes: {
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        maxLength: {
+            control: {
+                type: 'number',
+            },
+        },
+        labelPlacement: {
+            options: labelPlacements,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = Omit<
+    ComponentProps<typeof TextField>,
+    | 'helperBlock'
+    | 'contentLeft'
+    | 'htmlSize'
+    | 'contentRight'
+    | 'type'
+    | 'name'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'value'
+    | 'checked'
+    | 'maxLength'
+    | 'minLength'
+    | 'required'
+    | 'enumerationType'
+    | 'chips'
+    | 'onChangeChips'
+> & {
+    'storybook:contentLeft': boolean;
+    'storybook:contentRight': boolean;
+};
+
+const StoryDemo = ({
+    'storybook:contentLeft': enableContentLeft,
+    'storybook:contentRight': enableContentRight,
+    view,
+    ...rest
+}: StoryPropsDefault) => {
+    const [text, setText] = useState('Значение поля');
+
+    const iconSize = rest.size === 'xs' ? 'xs' : 's';
+
+    return (
+        <TextField
+            {...rest}
+            enumerationType="plain"
+            value={text}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+            view={view}
+            onChange={(e) => {
+                setText(e.target.value);
+                onChange(e.target.value);
+            }}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onSearch={onSearch}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        id: 'example-text-field',
+        size: 'l',
+        view: 'default',
+        label: 'Лейбл',
+        labelPlacement: 'outer',
+        placeholder: 'Заполните поле',
+        leftHelper: 'Подсказка к полю',
+        disabled: false,
+        readOnly: false,
+        'storybook:contentLeft': true,
+        'storybook:contentRight': true,
+    },
+    render: (args) => <StoryDemo {...args} />,
+};
+
+type StoryPropsChips = Omit<
+    ComponentProps<typeof TextField>,
+    | 'helperBlock'
+    | 'contentLeft'
+    | 'htmlSize'
+    | 'contentRight'
+    | 'type'
+    | 'name'
+    | 'onFocus'
+    | 'onBlur'
+    | 'onChange'
+    | 'onSearch'
+    | 'value'
+    | 'checked'
+    | 'maxLength'
+    | 'minLength'
+    | 'required'
+    | 'enumerationType'
+> & {
+    'storybook:contentLeft': boolean;
+    'storybook:contentRight': boolean;
+};
+
+const StoryChips = ({
+    'storybook:contentLeft': enableContentLeft,
+    'storybook:contentRight': enableContentRight,
+    view,
+    ...rest
+}: StoryPropsChips) => {
+    const [text, setText] = useState('Значение поля');
+
+    const iconSize = rest.size === 'xs' ? 'xs' : 's';
+
+    return (
+        <TextField
+            {...rest}
+            enumerationType="chip"
+            value={text}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
+            contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+            view={view}
+            onChange={(e) => {
+                setText(e.target.value);
+                onChange(e.target.value);
+            }}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onChangeChips={onChipsChange}
+        />
+    );
+};
+
+export const Chips: StoryObj<StoryPropsChips> = {
+    args: {
+        ...Default.args,
+        chips: ['1 value', '2 value', '3 value', '4 value'],
+    },
+    render: (args) => <StoryChips {...args} />,
+};

package/types/components/TextField/TextField.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import type { LabelHTMLAttributes } from 'react';
 import type { RootProps } from '../../engines';
 import type { TextFieldProps } from './TextField.types';
-export declare const textFieldRoot: (Root: RootProps<HTMLInputElement, TextFieldProps & LabelHTMLAttributes<HTMLLabelElement>>) => React.ForwardRefExoticComponent<import("../../engines/types").Filter<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("./TextField.types").TextFieldPropsVariations & React.RefAttributes<HTMLInputElement>>;
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const textFieldRoot: (Root: RootProps<HTMLDivElement, TextFieldProps>) => React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;
 export declare const textFieldConfig: {
     name: string;
     tag: string;
-    layout: (Root: RootProps<HTMLInputElement, TextFieldProps & LabelHTMLAttributes<HTMLLabelElement>>) => React.ForwardRefExoticComponent<import("../../engines/types").Filter<React.InputHTMLAttributes<HTMLInputElement>, "size"> & import("./TextField.types").TextFieldPropsVariations & React.RefAttributes<HTMLInputElement>>;
+    layout: (Root: RootProps<HTMLDivElement, TextFieldProps>) => React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLDivElement>>;
     base: import("@linaria/core").LinariaClassName;
     variations: {
         view: {
@@ -19,12 +19,17 @@ export declare const textFieldConfig: {
             css: import("@linaria/core").LinariaClassName;
             attrs: boolean;
         };
+        readOnly: {
+            css: import("@linaria/core").LinariaClassName;
+            attrs: boolean;
+        };
         labelPlacement: {
             css: import("@linaria/core").LinariaClassName;
         };
     };
     defaults: {
         size: string;
+        view: string;
     };
 };
 //# sourceMappingURL=TextField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAA4C,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAI3F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAYxD,eAAO,MAAM,aAAa,SAChB,UAAU,gBAAgB,EAAE,cAAc,GAAG,oBAAoB,gBAAgB,CAAC,CAAC,8NAoEvF,CAAC;AAEP,eAAO,MAAM,eAAe;;;mBAtElB,UAAU,gBAAgB,EAAE,cAAc,GAAG,oBAAoB,gBAAgB,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;CA6F5F,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,OAAO,KAAK,EAAuC,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAoB7F,eAAO,MAAM,IAAI,0CAIhB,CAAC;AAEF,eAAO,MAAM,aAAa,SAAU,UAAU,cAAc,EAAE,cAAc,CAAC,0FAgMxE,CAAC;AAEN,eAAO,MAAM,eAAe;;;mBAlMQ,UAAU,cAAc,EAAE,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CA8N5E,CAAC"}

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

@@ -1,7 +1,10 @@
 /// <reference types="react" />
-export declare const Input: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Record<never, unknown>>;
-export declare const InputLabelWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const InputWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const Label: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const InputLabelWrapper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledChips: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const Input: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Record<never, unknown>>;
+export declare const Label: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLLabelElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & Record<never, unknown>>;
+export declare const StyledContentLeft: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const StyledContentRight: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const LeftHelper: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 //# sourceMappingURL=TextField.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,KAAK,8KAOjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAI7B,CAAC;AAGF,eAAO,MAAM,YAAY,qKAUxB,CAAC;AAEF,eAAO,MAAM,KAAK,qKAAe,CAAC;AAElC,eAAO,MAAM,UAAU,qKAAe,CAAC"}
+{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,YAAY,qKAKxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAoB7B,CAAC;AAEF,eAAO,MAAM,WAAW,qKAKvB,CAAC;AAEF,eAAO,MAAM,KAAK,8KASjB,CAAC;AAEF,eAAO,MAAM,KAAK,8KAAiB,CAAC;AAEpC,eAAO,MAAM,iBAAiB,qKAE7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAE9B,CAAC;AAEF,eAAO,MAAM,UAAU,qKAAe,CAAC"}

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

@@ -1,29 +1,41 @@
+export declare const classes: {
+    hasChips: string;
+    hasEmptyContentLeft: string;
+    hasEmptyContentRight: string;
+};
 export declare const tokens: {
     color: string;
     backgroundColor: string;
     backgroundColorHover: string;
     backgroundColorFocus: string;
-    /** Цвет каретки */
-    caretColor: string;
-    placeholderColor: string;
     borderColor: string;
     borderColorHover: string;
     borderColorFocus: string;
+    /** Цвета для read-only состояния */
+    colorReadOnly: string;
+    backgroundColorReadOnly: string;
+    borderColorReadOnly: string;
+    placeholderColorReadOnly: string;
+    /** Цвет каретки */
+    caretColor: string;
+    placeholderColor: string;
     height: string;
     borderWidth: string;
     borderRadius: string;
-    /** отступ от границы ТextField */
+    /** Отступ от границы ТextField */
     padding: string;
-    paddingWithContent: string;
-    contentOffset: string;
+    paddingWithChips: string;
+    leftContentMargin: string;
+    rightContentMargin: string;
     fontFamily: string;
     fontStyle: string;
     fontSize: string;
     fontWeight: string;
     letterSpacing: string;
     lineHeight: string;
-    /** Цвет подписи */
+    /** Токены лейбла */
     labelColor: string;
+    labelColorReadOnly: string;
     labelOffset: string;
     labelFontFamily: string;
     labelFontStyle: string;
@@ -37,7 +49,10 @@ export declare const tokens: {
     labelInnerFontWeight: string;
     labelInnerLetterSpacing: string;
     labelInnerLineHeight: string;
+    labelInnerPadding: string;
+    contentLabelInnerPadding: string;
     leftHelperColor: string;
+    leftHelperColorReadOnly: string;
     leftHelperOffset: string;
     leftHelperFontFamily: string;
     leftHelperFontStyle: string;
@@ -45,8 +60,42 @@ export declare const tokens: {
     leftHelperFontWeight: string;
     leftHelperLetterSpacing: string;
     leftHelperLineHeight: string;
-    contentColor: string;
     /** Прозрачность для всего компонента в состоянии disabled */
     disabledOpacity: string;
+    /** Токены чипа */
+    chipHeight: string;
+    chipBorderRadius: string;
+    chipGap: string;
+    chipBackground: string;
+    chipColor: string;
+    chipBackgroundHover: string;
+    chipColorHover: string;
+    chipScaleHover: string;
+    chipBackgroundReadOnly: string;
+    chipColorReadOnly: string;
+    chipBackgroundReadOnlyHover: string;
+    chipColorReadOnlyHover: string;
+    chipBackgroundActive: string;
+    chipColorActive: string;
+    chipScaleActive: string;
+    chipFocusColor: string;
+    chipCloseIconColor: string;
+    chipOutlineSize: string;
+    chipWidth: string;
+    chipPaddingTop: string;
+    chipPaddingRight: string;
+    chipPaddingBottom: string;
+    chipPaddingLeft: string;
+    chipCloseIconSize: string;
+    chipFontFamily: string;
+    chipFontSize: string;
+    chipFontStyle: string;
+    chipFontWeight: string;
+    chipLetterSpacing: string;
+    chipLineHeight: string;
+    chipClearContentMarginLeft: string;
+    chipClearContentMarginRight: string;
+    chipOpacityReadonly: string;
+    focusColor: string;
 };
 //# sourceMappingURL=TextField.tokens.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;IAKf,mBAAmB;;;;;;;;;IAUnB,kCAAkC;;;;;;;;;;IAelC,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;IAgCnB,6DAA6D;;CAEhE,CAAC"}
+{"version":3,"file":"TextField.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;IAWf,oCAAoC;;;;;IAMpC,mBAAmB;;;;;;IAQnB,kCAAkC;;;;;;;;;;;IAelC,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkCpB,6DAA6D;;IAG7D,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCrB,CAAC"}

package/types/components/TextField/TextField.types.d.ts

@@ -1,6 +1,48 @@
-import type { InputHTMLAttributes, KeyboardEvent } from 'react';
-import type { Filter } from '../../engines/types';
-export interface TextFieldPropsBase {
+import type { MutableRefObject, InputHTMLAttributes, KeyboardEvent, ChangeEvent } from 'react';
+export declare type TextFieldPrimitiveValue = string | number | boolean;
+export declare type ChipValues = {
+    id: string;
+    text: TextFieldPrimitiveValue;
+};
+export declare type EnumerationType = 'plain' | 'chip';
+declare type TextFieldChipProps = {
+    /**
+     * Выбранные значения.
+     */
+    chips?: never;
+    /**
+     * Обработчик изменения выбранных значений.
+     */
+    onChangeChips?: never;
+    /**
+     * Тип перечисления значений.
+     * Варианты: plain, chip
+     */
+    enumerationType?: 'plain';
+    /**
+     * Callback по нажатию Enter
+     */
+    onSearch?: (value: string, event?: KeyboardEvent<HTMLInputElement>) => void;
+} | {
+    /**
+     * Тип перечисления значений.
+     * Варианты: plain, chip
+     */
+    enumerationType: 'chip';
+    /**
+     * Callback по нажатию Enter
+     */
+    onSearch?: never;
+    /**
+     * Выбранные значения.
+     */
+    chips?: Array<TextFieldPrimitiveValue>;
+    /**
+     * Обработчик изменения выбранных значений.
+     */
+    onChangeChips?: (value: Array<TextFieldPrimitiveValue>) => void;
+};
+export declare type TextFieldPropsBase = {
     /**
      * Метка-подпись к элементу
      */
@@ -25,8 +67,8 @@ export interface TextFieldPropsBase {
      * Callback по нажатию Enter
      */
     onSearch?: (value: string, event?: KeyboardEvent<HTMLInputElement>) => void;
-}
-export interface TextFieldPropsVariations extends TextFieldPropsBase {
+} & TextFieldChipProps;
+export declare type TextFieldProps = {
     /**
      * Размер контрола.
      */
@@ -35,6 +77,29 @@ export interface TextFieldPropsVariations extends TextFieldPropsBase {
      * Вид контрола.
      */
     view?: string;
+    /**
+     * Компонент доступен только для чтения.
+     */
+    readOnly?: boolean;
+    /**
+     * Компонент неактивен.
+     */
+    disabled?: boolean;
+} & TextFieldPropsBase & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export interface ControlledRefs {
+    chipsRefs: MutableRefObject<Array<HTMLButtonElement>>;
+    inputRef?: MutableRefObject<HTMLInputElement | null>;
+    contentRef?: MutableRefObject<HTMLDivElement | null>;
+}
+export interface UseKeyNavigationProps {
+    controlledRefs: ControlledRefs;
+    disabled: boolean;
+    readOnly: boolean;
+    chips: Array<ChipValues>;
+    enumerationType: EnumerationType;
+    updateChips: (newChips: Array<ChipValues>, newValues: Array<TextFieldPrimitiveValue>) => void;
+    onSearch?: (value: string, event?: KeyboardEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare type TextFieldProps = Filter<InputHTMLAttributes<HTMLInputElement>, 'size'> & TextFieldPropsVariations;
+export {};
 //# sourceMappingURL=TextField.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.types.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,WAAW,kBAAkB;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC/E;AAED,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;IAChE;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,oBAAY,cAAc,GAAG,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG,wBAAwB,CAAC"}
+{"version":3,"file":"TextField.types.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE/F,oBAAY,uBAAuB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEhE,oBAAY,UAAU,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,uBAAuB,CAAC;CACjC,CAAC;AAEF,oBAAY,eAAe,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/C,aAAK,kBAAkB,GACjB;IACI;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC/E,GACD;IACI;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,uBAAuB,CAAC,CAAC;IACvC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;CACnE,CAAC;AAER,oBAAY,kBAAkB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC/E,GAAG,kBAAkB,CAAC;AAEvB,oBAAY,cAAc,GAAG;IACzB;;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,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,kBAAkB,GAClB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;AAExD,MAAM,WAAW,cAAc;IAC3B,SAAS,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACrD,UAAU,CAAC,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,qBAAqB;IAClC,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IACzB,eAAe,EAAE,eAAe,CAAC;IACjC,WAAW,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAC9F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7D"}

package/types/components/TextField/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useKeyNavigation } from './useKeyNavigation';
+//# sourceMappingURL=index.d.ts.map

package/types/components/TextField/hooks/index.d.ts.map

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

package/types/components/TextField/hooks/useKeyNavigation.d.ts

@@ -0,0 +1,17 @@
+import type { ChangeEvent, KeyboardEvent } from 'react';
+import type { UseKeyNavigationProps } from '../TextField.types';
+export declare const Keys: {
+    Enter: string;
+    Tab: string;
+    Escape: string;
+    ArrowLeft: string;
+    ArrowRight: string;
+    Backspace: string;
+};
+export declare const useKeyNavigation: ({ controlledRefs: { chipsRefs, contentRef, inputRef }, disabled, readOnly, chips, enumerationType, updateChips, onChange, onSearch, }: UseKeyNavigationProps) => {
+    readonly handleInputKeydown: (event: ChangeEvent<HTMLInputElement> & KeyboardEvent<HTMLInputElement>) => void;
+    readonly handleChipKeyDown: (event: KeyboardEvent<HTMLButtonElement>, chipId: string, chipIndex: number) => void;
+    readonly onChipClear: (clearId: string, index: number) => void;
+    readonly handleContentKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+};
+//# sourceMappingURL=useKeyNavigation.d.ts.map

package/types/components/TextField/hooks/useKeyNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyNavigation.d.ts","sourceRoot":"","sources":["../../../../src/components/TextField/hooks/useKeyNavigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,eAAO,MAAM,IAAI;;;;;;;CAOhB,CAAC;AAEF,eAAO,MAAM,gBAAgB,0IAS1B,qBAAqB;yCAGe,YAAY,gBAAgB,CAAC,GAAG,cAAc,gBAAgB,CAAC;wCA6ChE,cAAc,iBAAiB,CAAC,UAAU,MAAM,aAAa,MAAM;oCAZvE,MAAM,SAAS,MAAM;2CAsBd,cAAc,cAAc,CAAC;CAkDrE,CAAC"}

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

@@ -1,5 +1,6 @@
-export { labelPlacement_inner as textField_labelPlacement_inner } from './_label-placement/inner';
-export { labelPlacement_outer as textField_labelPlacement_outer } from './_label-placement/outer';
+export { labelPlacement_inner as textField_labelPlacement_inner } from './variations/_label-placement/inner';
+export { labelPlacement_outer as textField_labelPlacement_outer } from './variations/_label-placement/outer';
 export { textFieldRoot, textFieldConfig } from './TextField';
 export { tokens as textFieldTokens } from './TextField.tokens';
+export type { TextFieldProps } from './TextField.types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,IAAI,8BAA8B,EAAE,MAAM,0BAA0B,CAAC;AAClG,OAAO,EAAE,oBAAoB,IAAI,8BAA8B,EAAE,MAAM,0BAA0B,CAAC;AAElG,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,IAAI,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAC7G,OAAO,EAAE,oBAAoB,IAAI,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAE7G,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC/D,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/types/components/TextField/ui/TextFieldChip/TextFieldChip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TextFieldChipProps } from './TextFieldChip.types';
+/**
+ * Чип, отображающий выбранный элемент
+ */
+export declare const TextFieldChip: React.ForwardRefExoticComponent<TextFieldChipProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=TextFieldChip.d.ts.map

package/types/components/TextField/ui/TextFieldChip/TextFieldChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextField/ui/TextFieldChip/TextFieldChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE;;GAEG;AACH,eAAO,MAAM,aAAa,8FAqBzB,CAAC"}

package/types/components/TextField/ui/TextFieldChip/TextFieldChip.styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const StyledChip: import("@linaria/react").StyledMeta & import("react").FunctionComponent<import("../../../../engines/types").PropsType<import("../../../../engines/types").Variants> & import("../../../Chip").ChipProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=TextFieldChip.styles.d.ts.map

package/types/components/TextField/ui/TextFieldChip/TextFieldChip.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFieldChip.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextField/ui/TextFieldChip/TextFieldChip.styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,UAAU,6PA2CtB,CAAC"}

package/types/components/TextField/ui/TextFieldChip/TextFieldChip.types.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import type { TextFieldPrimitiveValue } from '../../TextField.types';
+export interface TextFieldChipProps {
+    /**
+     * ID для чипа.
+     */
+    id: string;
+    /**
+     * Отображаемый текст.
+     */
+    text: TextFieldPrimitiveValue;
+    /**
+     * Выбранное значение.
+     */
+    value: TextFieldPrimitiveValue;
+    /**
+     * Компонент неактивен
+     */
+    disabled?: boolean;
+    /**
+     * Элемент формы не может изменяться пользователем
+     */
+    readOnly?: boolean;
+    /**
+     * Обработчик удаления выбранного значения.
+     */
+    onClear: (id: string) => void;
+    /**
+     * Обработчик клика на выбранное значение.
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик нажатия клавиши.
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, chipId: string) => void;
+}
+//# sourceMappingURL=TextFieldChip.types.d.ts.map