@ozen-ui/kit 0.53.0 → 0.54.0

package/__inner__/esm/components/DatePicker/utils/getCalendarSizeToFormElement/index.js

@@ -0,0 +1 @@
+export * from './getCalendarSizeToFormElement';

package/__inner__/esm/components/DatePicker/utils/index.d.ts

@@ -1,4 +1,4 @@
-export * from './matchCalendarSizeToFormElement';
+export * from './getCalendarSizeToFormElement';
 export * from './formatDateToString';
 export * from './formatStringToDate';
 export * from './isOutOfRange';

package/__inner__/esm/components/DatePicker/utils/index.js

@@ -1,4 +1,4 @@
-export * from './matchCalendarSizeToFormElement';
+export * from './getCalendarSizeToFormElement';
 export * from './formatDateToString';
 export * from './formatStringToDate';
 export * from './isOutOfRange';

package/__inner__/esm/components/FieldControl/FieldControl.css

@@ -102,18 +102,21 @@
 .FieldControl_fullWidth {
     inline-size: 100%;
   }
+.FieldControl_disableStroke {
+    --textfield-border-color: transparent;
+  }
 .FieldControl:hover {
     --textfield-border-color: var(--color-border-main-hover);
   }
 .FieldControl_focused,
   .FieldControl_focused:hover {
-    --textfield-border-width: var(--border-width-s);
     --textfield-border-color: var(--color-border-action);
     --textfield-background-color: var(--color-background-main);
   }
 .FieldControl_error,
   .FieldControl_error.FieldControl:hover,
   .FieldControl_error.FieldControl_focused,
+  .FieldControl_error.FieldControl_disableStroke,
   .FieldControl_error.FieldControl_focused:hover {
     --textfield-border-color: var(--color-border-error);
   }
@@ -124,3 +127,6 @@
     cursor: default;
     pointer-events: none;
   }
+.FieldControl_disableStroke.FieldControl_disabled {
+    --textfield-border-color: transparent;
+  }

package/__inner__/esm/components/FieldControl/FieldControl.js

@@ -16,7 +16,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
     });
     var innerRef = useRef(null);
     var hovered = useHover(innerRef);
-    var _a = props.as, Tag = _a === void 0 ? FIELD_CONTROL_DEFAULT_TAG : _a, sizeProp = props.size, disabledProp = props.disabled, requiredProp = props.required, errorProp = props.error, fullWidthProp = props.fullWidth, filledProp = props.filled, focusedProp = props.focused, children = props.children, className = props.className, otherProp = __rest(props, ["as", "size", "disabled", "required", "error", "fullWidth", "filled", "focused", "children", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? FIELD_CONTROL_DEFAULT_TAG : _a, disableStrokeProp = props.disableStroke, sizeProp = props.size, disabledProp = props.disabled, requiredProp = props.required, errorProp = props.error, fullWidthProp = props.fullWidth, filledProp = props.filled, focusedProp = props.focused, children = props.children, className = props.className, otherProp = __rest(props, ["as", "disableStroke", "size", "disabled", "required", "error", "fullWidth", "filled", "focused", "children", "className"]);
     var focused = focusedProp;
     var filled = filledProp;
     var size = sizeProp;
@@ -24,6 +24,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
     var disabled = disabledProp;
     var error = errorProp;
     var fullWidth = fullWidthProp;
+    var disableStroke = disableStrokeProp;
     var initialState = {
         size: size,
         filled: filled,
@@ -56,6 +57,9 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
     if (fullWidth === undefined && state.fullWidth) {
         fullWidth = state.fullWidth;
     }
+    if (disableStroke === undefined && state.disableStroke) {
+        disableStroke = state.disableStroke;
+    }
     return (React.createElement(Tag, __assign({ className: cnFieldControl({
             error: error,
             fullWidth: fullWidth,
@@ -64,6 +68,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
             size: size,
             filled: filled,
             focused: focused,
+            disableStroke: disableStroke,
             hasLabel: !!label,
         }, [className]) }, otherProp, { ref: useMultiRef([ref, innerRef]) }),
         React.createElement(FieldControlContext.Provider, { value: [
@@ -78,6 +83,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
                     focused: focused,
                     hovered: hovered,
                     value: value,
+                    disableStroke: disableStroke,
                 },
                 setState,
             ] }, children)));

package/__inner__/esm/components/FieldControl/FieldControlContext.d.ts

@@ -11,6 +11,7 @@ export type FieldControlContextValue = {
     focused?: boolean;
     hovered?: boolean;
     label?: string;
+    disableStroke?: boolean;
     value?: string | number;
 };
 export declare const FieldControlContext: React.Context<[FieldControlContextValue, Dispatch<SetStateAction<FieldControlContextValue>>]>;

package/__inner__/esm/components/FilePicker/FilePicker.d.ts

@@ -21,6 +21,7 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
     }) | undefined;
     disableTruncate?: boolean | undefined;
     required?: boolean | undefined;
+    disableStroke?: boolean | undefined;
     renderLeft?: string | number | React.FC<React.SVGProps<SVGSVGElement> & {
         color?: string | undefined;
         ref?: React.Ref<SVGSVGElement> | undefined;
@@ -68,7 +69,7 @@ export declare const FilePicker: React.ForwardRefExoticComponent<{
 } & {
     labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     inputRef?: React.Ref<HTMLInputElement> | undefined;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "error" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "fullWidth" | "labelProps" | "data-testid" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "name" | "error" | "label" | "className" | "id" | "onChange" | "autoFocus" | "disabled" | "accept" | "multiple" | "placeholder" | "required" | "size" | "fullWidth" | "labelProps" | "data-testid" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "onClear" | "fileList" | "disableTruncate" | "renderValue" | keyof {
     labelRef?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
     inputRef?: React.Ref<HTMLInputElement> | undefined;
 }> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/FilePicker/types.d.ts

@@ -50,6 +50,8 @@ export type FilePickerBaseProps = {
     disableTruncate?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
     required?: boolean;
+    /** Если {true} отключает обводку */
+    disableStroke?: boolean;
     /** Текст или иконка слева */
     renderLeft?: FieldIconProps['icon'];
     /** Текст или иконка справа */

package/__inner__/esm/components/Input/types.d.ts

@@ -46,6 +46,8 @@ export type InputProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFAULT
     disabled?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
     required?: boolean;
+    /** Если {true} отключает обводку */
+    disableStroke?: boolean;
     /** Минимальное количество символов разрешенных для ввода */
     minLength?: InputElement['minLength'];
     /** Максимальное количество символов разрешенных для ввода */

package/__inner__/esm/components/InputNumber/types.d.ts

@@ -38,6 +38,8 @@ export type InputNumberProps = {
     disabled?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
     required?: boolean;
+    /** Если {true} отключает обводку */
+    disableStroke?: boolean;
     /** Текст или иконка слева */
     renderLeft?: FieldIconProps['icon'];
     /** Текст или иконка справа */

package/__inner__/esm/components/Select/Select.js

@@ -17,7 +17,7 @@ var SelectRender = function (inProps, ref) {
         props: inProps,
         name: 'Select',
     });
-    var _a = props.size, size = _a === void 0 ? SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? SELECT_DEFAULT_DEFAULT_OPEN : _g, id = props.id, name = props.name, valueProp = props.value, defaultValue = props.defaultValue, error = props.error, onChange = props.onChange, label = props.label, placeholder = props.placeholder, renderValueProp = props.renderValue, renderLeft = props.renderLeft, renderRight = props.renderRight, hint = props.hint, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, hintProps = props.hintProps, bodeRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, other = __rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "id", "name", "value", "defaultValue", "error", "onChange", "label", "placeholder", "renderValue", "renderLeft", "renderRight", "hint", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "hintProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
+    var _a = props.size, size = _a === void 0 ? SELECT_DEFAULT_SIZE : _a, _b = props.autoFocus, autoFocus = _b === void 0 ? SELECT_DEFAULT_AUTO_FOCUS : _b, _c = props.fullWidth, fullWidth = _c === void 0 ? SELECT_DEFAULT_FULL_WIDTH : _c, _d = props.disabled, disabled = _d === void 0 ? SELECT_DEFAULT_DISABLED : _d, _e = props.required, required = _e === void 0 ? SELECT_DEFAULT_REQUIRED : _e, _f = props.multiline, multiline = _f === void 0 ? SELECT_DEFAULT_MULTILINE : _f, _g = props.defaultOpen, defaultOpen = _g === void 0 ? SELECT_DEFAULT_DEFAULT_OPEN : _g, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, renderValueProp = props.renderValue, children = props.children, onClick = props.onClick, onKeyDown = props.onKeyDown, menuProps = props.menuProps, dataListPropsProp = props.dataListProps, bodyProps = props.bodyProps, bodeRefProp = props.bodyRef, onCloseProp = props.onClose, onOpenProp = props.onOpen, openProp = props.open, multiple = props.multiple, other = __rest(props, ["size", "autoFocus", "fullWidth", "disabled", "required", "multiline", "defaultOpen", "value", "defaultValue", "onChange", "renderValue", "children", "onClick", "onKeyDown", "menuProps", "dataListProps", "bodyProps", "bodyRef", "onClose", "onOpen", "open", "multiple"]);
     var bodyInnerRef = useRef(null);
     /** @deprecated props */
     var bodyRef = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref) || bodeRefProp;
@@ -42,7 +42,7 @@ var SelectRender = function (inProps, ref) {
     Children.forEach(resolvedChildren, function (child) {
         var _a, _b;
         if (!isNotSelectOption(child)) {
-            var label_1 = typeof child.props.children === 'string'
+            var label = typeof child.props.children === 'string'
                 ? (_a = child.props.label) !== null && _a !== void 0 ? _a : child.props.children
                 : child.props.label;
             var params = {
@@ -54,14 +54,14 @@ var SelectRender = function (inProps, ref) {
                 var selected = (_b = params.value) === null || _b === void 0 ? void 0 : _b.includes(child.props.value);
                 if (selected) {
                     currentLabel = __spreadArray(__spreadArray([], __read((params.label || [])), false), [
-                        label_1,
+                        label,
                     ], false);
                 }
             }
             if (isNotMultipleParams(params)) {
                 var selected = params.value === child.props.value;
                 if (selected) {
-                    currentLabel = label_1;
+                    currentLabel = label;
                 }
             }
         }
@@ -159,10 +159,10 @@ var SelectRender = function (inProps, ref) {
         }
     }, [autoFocus]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SelectInput, __assign({ id: id, name: name, label: label, placeholder: placeholder, size: size, disabled: disabled, required: required, multiline: multiline, error: error, hint: hint, fullWidth: fullWidth, renderLeft: renderLeft, renderRight: renderRight }, other, { open: open, value: inputValue() || '', onKeyDown: handleKeyDown, onClick: handleClick, bodyProps: __assign(__assign({}, bodyProps), { ref: useMultiRef([bodyRef, bodyInnerRef]) }), hintProps: hintProps, ref: ref, renderedValue: renderValue({
+        React.createElement(SelectInput, __assign({ size: size, disabled: disabled, required: required, multiline: multiline, fullWidth: fullWidth }, other, { open: open, onClick: handleClick, onKeyDown: handleKeyDown, value: inputValue(), renderedValue: renderValue({
                 label: currentLabel,
                 value: valueState,
-            }) })),
+            }), bodyProps: __assign(__assign({}, bodyProps), { ref: useMultiRef([bodyRef, bodyInnerRef]) }), ref: ref })),
         React.createElement(DataList, __assign({ equalAnchorWidth: true }, dataListProps, { listProps: __assign({ size: size, role: 'listbox' }, dataListProps === null || dataListProps === void 0 ? void 0 : dataListProps.listProps), open: open, multiple: multiple, selected: (valueState || ''), onSelect: handleChange, anchorRef: bodyInnerRef, onClose: handleClose }), children)));
 };
 export var Select = forwardRef(SelectRender);

package/__inner__/esm/components/Select/components/SelectInput/types.d.ts

@@ -60,6 +60,8 @@ export type SelectInputProps = Omit<ComponentPropsWithRef<'div'>, 'value' | 'def
     disabled?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
     required?: boolean;
+    /** Если {true} отключает обводку */
+    disableStroke?: boolean;
     /** Если {true} предотвращает сокращение текста в значении и
      * задает гибкую высоту контейнера компонента */
     multiline?: boolean;

package/__inner__/esm/components/Select/types.d.ts

@@ -65,6 +65,6 @@ export type SelectProps<MULTIPLE extends boolean = false> = {
     multiple?: MULTIPLE;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
-} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> & SelectPropsDeprecated<MULTIPLE> & (SelectControlledProps<MULTIPLE> | SelectUncontrolledProps<MULTIPLE>) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
+} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'disableStroke' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> & SelectPropsDeprecated<MULTIPLE> & (SelectControlledProps<MULTIPLE> | SelectUncontrolledProps<MULTIPLE>) & (SelectOpenControlledProps | SelectOpenUncontrolledProps);
 export type SelectComponent = <MULTIPLE extends boolean = false>(props: SelectProps<MULTIPLE>) => ReactElement | null;
 export {};

package/__inner__/esm/components/Tag/Tag.css

@@ -5,6 +5,8 @@
   align-items: center;
   display: inline-flex;
   text-decoration: none;
+  white-space: nowrap;
+  max-inline-size: 100%;
   gap: var(--spacing-3xs);
   padding: var(--tag-padding);
   border-radius: var(--tag-border-radius);
@@ -13,6 +15,9 @@
     background-color var(--transition-default),
     color var(--transition-default);
 }
+.Tag > svg {
+    flex-shrink: 0;
+  }
 .Tag_size_2xs {
       font: var(--typography-text-3xs-font);
       letter-spacing: var(--typography-text-3xs-letter_spacing, 0);

package/__inner__/esm/components/Tag/Tag.js

@@ -1,6 +1,7 @@
 import { __assign, __rest } from "tslib";
 import './Tag.css';
 import React from 'react';
+import { deprecate } from '@ozen-ui/logger';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
@@ -19,6 +20,9 @@ export var cnTag = cn('Tag');
 export var Tag = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Tag' });
     var _a = props.size, size = _a === void 0 ? TAG_DEFAULT_SIZE : _a, _b = props.as, Tag = _b === void 0 ? TAG_DEFAULT_AS : _b, _c = props.variant, variant = _c === void 0 ? TAG_DEFAULT_VARIANT : _c, IconLeft = props.iconLeft, IconRight = props.iconRight, label = props.label, className = props.className, onRemove = props.onRemove, other = __rest(props, ["size", "as", "variant", "iconLeft", "iconRight", "label", "className", "onRemove"]);
+    if (process.env.NODE_ENV !== 'production') {
+        deprecate('Компонент «Tag» устарел. Для замены используйте компонент «TagNext».');
+    }
     return (React.createElement(Tag, __assign({ className: cnTag({ variant: variant, size: size }, [className]) }, other, { ref: ref }),
         IconLeft && React.createElement(IconLeft, { size: "s" }),
         React.createElement("span", { className: cnTag('Label') }, label),

package/__inner__/esm/components/TagNext/Tag.css

@@ -0,0 +1,244 @@
+/* stylelint-disable */
+.TagNext {
+  border: none;
+  outline: none;
+  align-items: center;
+  display: inline-flex;
+  text-decoration: none;
+  white-space: nowrap;
+  max-inline-size: 100%;
+  gap: var(--tag-gap);
+  padding: var(--tag-padding);
+  border-radius: var(--tag-border-radius);
+  transition:
+    box-shadow var(--transition-default),
+    background-color var(--transition-default),
+    color var(--transition-default);
+}
+.TagNext > svg {
+    flex-shrink: 0;
+  }
+.TagNext_size_2xs {
+      font: var(--typography-text-3xs-font);
+      letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
+      text-transform: var(--typography-text-3xs-text_transform, none);
+
+      --tag-padding: 0 4px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-s);
+    }
+.TagNext_size_xs {
+      font: var(--typography-text-xs-font);
+      letter-spacing: var(--typography-text-xs-letter_spacing, 0);
+      text-transform: var(--typography-text-xs-text_transform, none);
+
+      --tag-padding: 4px 8px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-s);
+    }
+.TagNext_size_s {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-3xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_size_m {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-2xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_size_l {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+
+      --tag-padding: 6px 12px;
+      --tag-gap: var(--spacing-2xs);
+      --tag-border-radius: var(--border-radius-m);
+    }
+.TagNext_interactive:focus:not(:focus-visible) {
+      box-shadow: none;
+    }
+.TagNext_interactive:focus {
+      box-shadow: var(--shadow-outline-focused);
+    }
+/** primary & neutral */
+.TagNext_variant_primary.TagNext_color_neutral {
+    background-color: var(--color-background-action-secondary);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive:hover {
+      background-color: var(--color-background-action-secondary-hover);
+    }
+.TagNext_variant_primary.TagNext_color_neutral.TagNext_interactive:active {
+      background-color: var(--color-background-action-secondary-pressed);
+    }
+/** primary & action */
+.TagNext_variant_primary.TagNext_color_action {
+    background-color: var(--color-background-action);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive:hover {
+      background-color: var(--color-background-action-hover);
+    }
+.TagNext_variant_primary.TagNext_color_action.TagNext_interactive:active {
+      background-color: var(--color-background-action-pressed);
+    }
+/** primary & error */
+.TagNext_variant_primary.TagNext_color_error {
+    background-color: var(--color-background-error);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive:hover {
+      background-color: var(--color-background-error-hover);
+    }
+.TagNext_variant_primary.TagNext_color_error.TagNext_interactive:active {
+      background-color: var(--color-background-error-pressed);
+    }
+/** primary & warning */
+.TagNext_variant_primary.TagNext_color_warning {
+    background-color: var(--color-background-warning);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive:hover {
+      background-color: var(--color-background-warning-hover);
+    }
+.TagNext_variant_primary.TagNext_color_warning.TagNext_interactive:active {
+      background-color: var(--color-background-warning-pressed);
+    }
+/** primary & success */
+.TagNext_variant_primary.TagNext_color_success {
+    background-color: var(--color-background-success);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive:hover {
+      background-color: var(--color-background-success-hover);
+    }
+.TagNext_variant_primary.TagNext_color_success.TagNext_interactive:active {
+      background-color: var(--color-background-success-pressed);
+    }
+/** primary & info */
+.TagNext_variant_primary.TagNext_color_info {
+    background-color: var(--color-background-info);
+    color: var(--color-content-action-on);
+  }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive:hover {
+      background-color: var(--color-background-info-hover);
+    }
+.TagNext_variant_primary.TagNext_color_info.TagNext_interactive:active {
+      background-color: var(--color-background-info-pressed);
+    }
+/** secondary & neutral */
+.TagNext_variant_secondary.TagNext_color_neutral {
+    background-color: var(--color-background-secondary);
+    color: var(--color-content-primary);
+  }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive:hover {
+      background-color: var(--color-background-secondary-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_neutral.TagNext_interactive:active {
+      background-color: var(--color-background-secondary-pressed);
+    }
+/** secondary & action */
+.TagNext_variant_secondary.TagNext_color_action {
+    background-color: var(--color-background-action-light);
+    color: var(--color-content-action-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive:hover {
+      background-color: var(--color-background-action-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_action.TagNext_interactive:active {
+      background-color: var(--color-background-action-light-pressed);
+    }
+/** secondary & error */
+.TagNext_variant_secondary.TagNext_color_error {
+    background-color: var(--color-background-error-light);
+    color: var(--color-content-error-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive:hover {
+      background-color: var(--color-background-error-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_error.TagNext_interactive:active {
+      background-color: var(--color-background-error-light-pressed);
+    }
+/** secondary & warning */
+.TagNext_variant_secondary.TagNext_color_warning {
+    background-color: var(--color-background-warning-light);
+    color: var(--color-content-warning-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive:hover {
+      background-color: var(--color-background-warning-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_warning.TagNext_interactive:active {
+      background-color: var(--color-background-warning-light-pressed);
+    }
+/** secondary & success */
+.TagNext_variant_secondary.TagNext_color_success {
+    background-color: var(--color-background-success-light);
+    color: var(--color-content-success-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive:hover {
+      background-color: var(--color-background-success-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_success.TagNext_interactive:active {
+      background-color: var(--color-background-success-light-pressed);
+    }
+/** secondary & info */
+.TagNext_variant_secondary.TagNext_color_info {
+    background-color: var(--color-background-info-light);
+    color: var(--color-content-info-dark);
+  }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive {
+    cursor: pointer;
+  }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive:hover {
+      background-color: var(--color-background-info-light-hover);
+    }
+.TagNext_variant_secondary.TagNext_color_info.TagNext_interactive:active {
+      background-color: var(--color-background-info-light-pressed);
+    }
+.TagNext-Label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }

package/__inner__/esm/components/TagNext/Tag.d.ts

@@ -0,0 +1,33 @@
+import './Tag.css';
+import type { ElementType } from 'react';
+import type { IconProps, IconSize } from '@ozen-ui/icons';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import { type RenderContentType } from '../../utils/renderContent';
+export declare const tagVariant: readonly ["primary", "secondary"];
+export declare const tagColorVariant: readonly ["neutral", "action", "error", "warning", "success", "info"];
+export type TagVariant = (typeof tagVariant)[number];
+export type TagColor = (typeof tagColorVariant)[number];
+export type TagIcon = RenderContentType<IconProps & {
+    size?: IconSize;
+}>['content'];
+export declare const cnTag: import("@bem-react/classname").ClassNameFormatter;
+type TagBaseProps = {
+    /** Текст лейбла внутри тега */
+    label: string;
+    /** Размер */
+    size?: FormElementSizeVariant;
+    /** Вариант компонента */
+    variant?: TagVariant;
+    /** Цвет компонента */
+    color?: TagColor;
+    /** Если {true} делает компонент интерактивным */
+    interactive?: boolean;
+    /** Иконка слева */
+    iconLeft?: TagIcon;
+    /** Иконка справа */
+    iconRight?: TagIcon;
+};
+export type TagProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<TagBaseProps, As>;
+export declare const Tag: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TagBaseProps, "div">;
+export {};

package/__inner__/esm/components/TagNext/Tag.js

@@ -0,0 +1,36 @@
+import { __assign, __rest } from "tslib";
+import './Tag.css';
+import React from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
+import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
+import { renderContent, } from '../../utils/renderContent';
+import { TAG_DEFAULT_AS, TAG_DEFAULT_COLOR, TAG_DEFAULT_SIZE, TAG_DEFAULT_VARIANT, } from './constants';
+export var tagVariant = ['primary', 'secondary'];
+export var tagColorVariant = [
+    'neutral',
+    'action',
+    'error',
+    'warning',
+    'success',
+    'info',
+];
+export var cnTag = cn('TagNext');
+export var Tag = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({ props: inProps, name: 'TagNext' });
+    var _a = props.variant, variant = _a === void 0 ? TAG_DEFAULT_VARIANT : _a, _b = props.size, size = _b === void 0 ? TAG_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? TAG_DEFAULT_AS : _c, _d = props.color, color = _d === void 0 ? TAG_DEFAULT_COLOR : _d, interactive = props.interactive, iconLeft = props.iconLeft, iconRight = props.iconRight, label = props.label, className = props.className, other = __rest(props, ["variant", "size", "as", "color", "interactive", "iconLeft", "iconRight", "label", "className"]);
+    var renderIcon = function (content) {
+        return renderContent({
+            content: content,
+            props: {
+                size: getIconSizeToFormElement(size),
+            },
+        });
+    };
+    return (React.createElement(Tag, __assign({ className: cnTag({ variant: variant, color: color, size: size, interactive: interactive }, [className]) }, other, { ref: ref }),
+        renderIcon(iconLeft),
+        React.createElement("span", { className: cnTag('Label') }, label),
+        renderIcon(iconRight)));
+});
+Tag.displayName = 'Tag';

package/__inner__/esm/components/TagNext/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const TAG_DEFAULT_AS = "div";
+export declare const TAG_DEFAULT_VARIANT = "secondary";
+export declare const TAG_DEFAULT_COLOR = "action";
+export declare const TAG_DEFAULT_SIZE = "m";

package/__inner__/esm/components/TagNext/constants.js

@@ -0,0 +1,4 @@
+export var TAG_DEFAULT_AS = 'div';
+export var TAG_DEFAULT_VARIANT = 'secondary';
+export var TAG_DEFAULT_COLOR = 'action';
+export var TAG_DEFAULT_SIZE = 'm';

package/__inner__/esm/components/TagNext/index.d.ts

@@ -0,0 +1 @@
+export * from './Tag';

package/__inner__/esm/components/TagNext/index.js

@@ -0,0 +1 @@
+export * from './Tag';

package/__inner__/esm/components/Textarea/types.d.ts

@@ -42,6 +42,8 @@ export type TextareaProps = Omit<ComponentPropsWithRef<typeof FIELD_CONTROL_DEFA
     disabled?: boolean;
     /** Если {true} делает элемент обязательным к заполнению */
     required?: boolean;
+    /** Если {true} отключает обводку */
+    disableStroke?: boolean;
     /** Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. */
     maxLength?: number;
     /** Количество колонок */