@ozen-ui/kit 0.18.0 → 0.20.0

package/ChipNext/package.json

@@ -0,0 +1,5 @@
+{
+	"main": "../__inner__/cjs/components/ChipNext/index.js",
+	"module": "../__inner__/esm/components/ChipNext/index.js",
+	"types": "../__inner__/esm/components/ChipNext/index.d.ts"
+}

package/__inner__/cjs/components/Avatar/Avatar.css

@@ -1,112 +1,115 @@
 .Avatar {
   --avatar-size: 100%;
+  --avatar-color: var(--color-content-action-on);
+  --avatar-bg-color: unset;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   inline-size: var(--avatar-size);
   block-size: var(--avatar-size);
+  color: var(--avatar-color);
+  background-color: var(--avatar-bg-color);
   font-family: Roboto, sans-serif;
   border-radius: 50%;
   position: relative;
   overflow: visible;
-  color: var(--color-content-action-on);
 }
 
   .Avatar_color_a1 {
-      background: var(--color-additional-a1);
+      --avatar-bg-color: var(--color-additional-a1);
     }
 
   .Avatar_color_a2 {
-      background: var(--color-additional-a2);
+      --avatar-bg-color: var(--color-additional-a2);
     }
 
   .Avatar_color_a3 {
-      background: var(--color-additional-a3);
+      --avatar-bg-color: var(--color-additional-a3);
     }
 
   .Avatar_color_b1 {
-      background: var(--color-additional-b1);
+      --avatar-bg-color: var(--color-additional-b1);
     }
 
   .Avatar_color_b2 {
-      background: var(--color-additional-b2);
+      --avatar-bg-color: var(--color-additional-b2);
     }
 
   .Avatar_color_b3 {
-      background: var(--color-additional-b3);
+      --avatar-bg-color: var(--color-additional-b3);
     }
 
   .Avatar_color_c1 {
-      background: var(--color-additional-c1);
+      --avatar-bg-color: var(--color-additional-c1);
     }
 
   .Avatar_color_c2 {
-      background: var(--color-additional-c2);
+      --avatar-bg-color: var(--color-additional-c2);
     }
 
   .Avatar_color_c3 {
-      background: var(--color-additional-c3);
+      --avatar-bg-color: var(--color-additional-c3);
     }
 
   .Avatar_color_d1 {
-      background: var(--color-additional-d1);
+      --avatar-bg-color: var(--color-additional-d1);
     }
 
   .Avatar_color_d2 {
-      background: var(--color-additional-d2);
+      --avatar-bg-color: var(--color-additional-d2);
     }
 
   .Avatar_color_d3 {
-      background: var(--color-additional-d3);
+      --avatar-bg-color: var(--color-additional-d3);
     }
 
   .Avatar_color_e1 {
-      background: var(--color-additional-e1);
+      --avatar-bg-color: var(--color-additional-e1);
     }
 
   .Avatar_color_e2 {
-      background: var(--color-additional-e2);
+      --avatar-bg-color: var(--color-additional-e2);
     }
 
   .Avatar_color_e3 {
-      background: var(--color-additional-e3);
+      --avatar-bg-color: var(--color-additional-e3);
     }
 
   .Avatar_color_f1 {
-      background: var(--color-additional-f1);
+      --avatar-bg-color: var(--color-additional-f1);
     }
 
   .Avatar_color_f2 {
-      background: var(--color-additional-f2);
+      --avatar-bg-color: var(--color-additional-f2);
     }
 
   .Avatar_color_f3 {
-      background: var(--color-additional-f3);
+      --avatar-bg-color: var(--color-additional-f3);
     }
 
   .Avatar_color_g1 {
-      background: var(--color-additional-g1);
+      --avatar-bg-color: var(--color-additional-g1);
     }
 
   .Avatar_color_g2 {
-      background: var(--color-additional-g2);
+      --avatar-bg-color: var(--color-additional-g2);
     }
 
   .Avatar_color_g3 {
-      background: var(--color-additional-g3);
+      --avatar-bg-color: var(--color-additional-g3);
     }
 
   .Avatar_color_h1 {
-      background: var(--color-additional-h1);
+      --avatar-bg-color: var(--color-additional-h1);
     }
 
   .Avatar_color_h2 {
-      background: var(--color-additional-h2);
+      --avatar-bg-color: var(--color-additional-h2);
     }
 
   .Avatar_color_h3 {
-      background: var(--color-additional-h3);
+      --avatar-bg-color: var(--color-additional-h3);
     }
 
   .Avatar-Image {

package/__inner__/cjs/components/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 import './Avatar.css';
 import React from 'react';
-import type { ComponentPropsWithRef, ComponentRef } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, ReactNode } from 'react';
 import type { IndicatorProps } from '../Indicator';
 export declare const avatarSizeVariant: readonly ["4xs", "3xs", "2xs", "xs", "s", "m", "l", "xl"];
 export declare const avatarHueVariant: number[];
@@ -16,14 +16,14 @@ export type AvatarProps = {
     /** Url изображения */
     src?: string;
     /** Имя пользователя */
-    name: string;
+    name?: string;
     /** Цветовой оттенок аватарки (при использовании без src) */
     hue?: AvatarHueVariant;
     /** Дополнительные СSS-классы */
     className?: string;
     /** Свойства компонента Indicator */
     indicatorProps?: IndicatorProps;
-    children?: never;
+    children?: ReactNode;
 } & ComponentPropsWithRef<typeof avatarEl>;
 export declare const cnAvatar: import("@bem-react/classname").ClassNameFormatter;
 export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/cjs/components/Avatar/Avatar.js

@@ -10,6 +10,7 @@ var classname_1 = require("../../utils/classname");
 var Indicator_1 = require("../Indicator");
 var constants_1 = require("./constants");
 var get_hash_number_1 = require("./get-hash-number");
+var utils_1 = require("./utils");
 exports.avatarSizeVariant = [
     '4xs',
     '3xs',
@@ -23,38 +24,25 @@ exports.avatarSizeVariant = [
 exports.avatarHueVariant = [1, 2, 3];
 var avatarEl = 'div';
 exports.cnAvatar = (0, classname_1.cn)('Avatar');
-var getInitials = function (name) {
-    var _a, _b, _c;
-    var parts = name.split(' ');
-    var initials;
-    if (parts.length === 1) {
-        initials = ((_a = parts[0]) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '';
-    }
-    else {
-        initials = ((_b = parts.shift()) !== null && _b !== void 0 ? _b : '').charAt(0) + ((_c = parts.pop()) !== null && _c !== void 0 ? _c : '').charAt(0);
-    }
-    return initials.toUpperCase();
-};
-var matchSizeIndicatorToAvatar = {
-    '4xs': 'xs',
-    '3xs': 'xs',
-    '2xs': 'xs',
-    xs: 's',
-    s: 's',
-    m: 's',
-    l: 'm',
-    xl: 'm',
-};
 exports.Avatar = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Avatar' });
-    var _a = props.size, size = _a === void 0 ? constants_1.AVATAR_DEFAULT_SIZE : _a, _b = props.online, online = _b === void 0 ? constants_1.AVATAR_DEFAULT_ONLINE : _b, _c = props.hue, hue = _c === void 0 ? constants_1.AVATAR_DEFAULT_HUE : _c, src = props.src, name = props.name, className = props.className, indicatorProps = props.indicatorProps, other = tslib_1.__rest(props, ["size", "online", "hue", "src", "name", "className", "indicatorProps"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.AVATAR_DEFAULT_SIZE : _a, _b = props.online, online = _b === void 0 ? constants_1.AVATAR_DEFAULT_ONLINE : _b, _c = props.hue, hue = _c === void 0 ? constants_1.AVATAR_DEFAULT_HUE : _c, src = props.src, nameProp = props.name, className = props.className, indicatorProps = props.indicatorProps, children = props.children, other = tslib_1.__rest(props, ["size", "online", "hue", "src", "name", "className", "indicatorProps", "children"]);
+    var name = nameProp || '';
     var _d = tslib_1.__read((0, useBoolean_1.useBoolean)(!!src), 2), showImage = _d[0], off = _d[1].off;
-    var indicatorSize = matchSizeIndicatorToAvatar[size];
+    var indicatorSize = utils_1.matchSizeIndicatorToAvatar[size];
     var colorShades = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
     var color = "".concat(colorShades[(0, get_hash_number_1.getHashNumber)(name, colorShades.length)]).concat(hue);
-    var initials = getInitials(name);
+    var renderContent = function () {
+        if (children) {
+            return children;
+        }
+        if (src && showImage) {
+            return (react_1.default.createElement("img", { src: src, alt: name, className: (0, exports.cnAvatar)('Image'), onError: off }));
+        }
+        return (0, utils_1.getInitials)(name);
+    };
     return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, exports.cnAvatar)({ size: size, color: !showImage && color }, [className]) }, other, { ref: ref }),
-        src && showImage ? (react_1.default.createElement("img", { src: src, alt: name, className: (0, exports.cnAvatar)('Image'), onError: off })) : (initials),
-        online && (react_1.default.createElement(Indicator_1.Indicator, tslib_1.__assign({ variant: "success", size: indicatorSize, className: (0, exports.cnAvatar)('Online'), border: true }, indicatorProps)))));
+        renderContent(),
+        online && (react_1.default.createElement(Indicator_1.Indicator, tslib_1.__assign({ variant: "success", size: indicatorSize, border: true }, indicatorProps, { className: (0, exports.cnAvatar)('Online', indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.className) })))));
 });
 exports.Avatar.displayName = 'Avatar';

package/__inner__/cjs/components/Avatar/utils.d.ts

@@ -0,0 +1,6 @@
+import type { IndicatorSizeVariant } from '../Indicator';
+import type { AvatarSizeVariant } from './index';
+export declare const getInitials: (name: string) => string;
+export declare const matchSizeIndicatorToAvatar: {
+    [key in AvatarSizeVariant]: IndicatorSizeVariant;
+};

package/__inner__/cjs/components/Avatar/utils.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchSizeIndicatorToAvatar = exports.getInitials = void 0;
+var getInitials = function (name) {
+    var _a, _b, _c;
+    var parts = name.split(' ');
+    var initials;
+    if (parts.length === 1) {
+        initials = ((_a = parts[0]) === null || _a === void 0 ? void 0 : _a.charAt(0)) || '';
+    }
+    else {
+        initials = ((_b = parts.shift()) !== null && _b !== void 0 ? _b : '').charAt(0) + ((_c = parts.pop()) !== null && _c !== void 0 ? _c : '').charAt(0);
+    }
+    return initials.toUpperCase();
+};
+exports.getInitials = getInitials;
+exports.matchSizeIndicatorToAvatar = {
+    '4xs': 'xs',
+    '3xs': 'xs',
+    '2xs': 'xs',
+    xs: 's',
+    s: 's',
+    m: 's',
+    l: 'm',
+    xl: 'm',
+};

package/__inner__/cjs/components/Button/Button.d.ts

@@ -1,17 +1,17 @@
 import './Button.css';
-import React from 'react';
 import type { ReactNode, 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';
 import { BUTTON_DEFAULT_TAG } from './constants';
 export declare const buttonVariant: readonly ["contained", "outlined", "ghost", "function"];
 export declare const buttonColorVariant: readonly ["primary", "secondary", "warning", "error"];
 export type ButtonVariant = (typeof buttonVariant)[number];
 export type ButtonColorVariant = (typeof buttonColorVariant)[number];
-export type ButtonIconComponent = React.FC<IconProps & {
+export type ButtonIcon = RenderContentType<IconProps & {
     size?: IconSize;
-}>;
+}>['content'];
 type ButtonBaseProps = {
     /**
      * Вариант отображения кнопки
@@ -37,9 +37,9 @@ type ButtonBaseProps = {
     /** Дополнительные CSS-классы */
     className?: string;
     /** Иконка слева */
-    iconLeft?: ButtonIconComponent;
+    iconLeft?: ButtonIcon;
     /** Иконка справа */
-    iconRight?: ButtonIconComponent;
+    iconRight?: ButtonIcon;
     /** Если {true} растягивает кнопку на всю ширину родительского контейнера */
     fullWidth?: boolean;
 };

package/__inner__/cjs/components/Button/Button.js

@@ -9,6 +9,7 @@ var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
 var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var renderContent_1 = require("../../utils/renderContent");
 var Loader_1 = require("../Loader");
 var constants_1 = require("./constants");
 exports.buttonVariant = [
@@ -31,19 +32,27 @@ exports.Button = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(
         props: inProps,
         name: 'Button',
     });
-    var _a = props.as, Tag = _a === void 0 ? constants_1.BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? constants_1.BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? constants_1.BUTTON_DEFAULT_SIZE : _d, IconLeft = props.iconLeft, IconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, onClick = props.onClick, other = tslib_1.__rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "onClick"]);
+    var _a = props.as, Tag = _a === void 0 ? constants_1.BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? constants_1.BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? constants_1.BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, onClick = props.onClick, other = tslib_1.__rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "onClick"]);
     var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
     var handleClick = function (event) {
         if (onClick && !disabled && !loading) {
             onClick(event);
         }
     };
+    var renderIcon = function (content) {
+        return (0, renderContent_1.renderContent)({
+            content: content,
+            props: {
+                size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
+            },
+        });
+    };
     var isInteractionPrevented = disabled || loading;
     var childContent = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("span", { className: (0, exports.cnButton)('Label') },
-            IconLeft && react_1.default.createElement(IconLeft, { size: iconSize }),
+            renderIcon(iconLeft),
             children,
-            IconRight && react_1.default.createElement(IconRight, { size: iconSize })),
+            renderIcon(iconRight)),
         react_1.default.createElement(react_transition_group_1.CSSTransition, { in: loading, timeout: 120, classNames: (0, exports.cnButton)('Loader', { animation: true }), unmountOnExit: true },
             react_1.default.createElement(Loader_1.Loader, { size: iconSize, color: "var(--color-content-disabled)", className: (0, exports.cnButton)('Loader') }))));
     return (react_1.default.createElement(Tag, tslib_1.__assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: (0, exports.cnButton)({

package/__inner__/cjs/components/Chip/Chip.d.ts

@@ -33,4 +33,7 @@ export type ChipBaseProps = {
     'data-testid'?: string;
 };
 export type ChipProps = ExtendableProps<InputHTMLAttributes<HTMLInputElement>, ChipBaseProps>;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент ChipNext
+ */
 export declare const Chip: React.ForwardRefExoticComponent<ChipBaseProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof ChipBaseProps> & React.RefAttributes<HTMLLabelElement>>;

package/__inner__/cjs/components/Chip/Chip.js

@@ -11,6 +11,9 @@ var constants_1 = require("./constants");
 exports.cnChip = (0, classname_1.cn)('Chip');
 exports.chipSizeVariant = ['xs', 's', 'm', 'l'];
 exports.chipColorVariant = ['primary', 'secondary'];
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент ChipNext
+ */
 exports.Chip = (0, react_1.forwardRef)(function (inProps, ref) {
     var _a = (0, useThemeProps_1.useThemeProps)({ name: 'Chip', props: inProps }), _b = _a.size, size = _b === void 0 ? constants_1.CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? constants_1.CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? constants_1.CHIP_DEFAULT_DISABLED : _d, IconLeft = _a.iconLeft, IconRight = _a.iconRight, labelProps = _a.labelProps, inputRef = _a.inputRef, className = _a.className, children = _a.children, dataTestId = _a["data-testid"], other = tslib_1.__rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "labelProps", "inputRef", "className", "children", 'data-testid']);
     var iconSize = (0, react_1.useMemo)(function () { return (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size); }, [size]);

package/__inner__/cjs/components/ChipNext/Chip.css

@@ -0,0 +1,108 @@
+/* stylelint-disable */
+.ChipNext {
+  --chip-border-radius: 24px;
+  --chip-text-wrap: nowrap;
+  background-color: var(--chip-bg-color);
+  border-radius: var(--chip-border-radius);
+  min-block-size: var(--chip-height);
+  padding: 0 var(--chip-padding-x);
+  min-inline-size: var(--chip-min-width);
+  color: var(--chip-text-color);
+  gap: var(--space-s);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  text-decoration: none;
+  border: none;
+  outline: none;
+  transition:
+    border-color var(--transition-default),
+    color var(--transition-default),
+    background-color var(--transition-default),
+    box-shadow var(--transition-default);
+}
+.ChipNext-Content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: var(--chip-text-wrap);
+  }
+.ChipNext-Icon {
+    color: inherit;
+    flex-shrink: 0;
+  }
+.ChipNext_multiline {
+    --chip-text-wrap: normal;
+  }
+.ChipNext_size_xs {
+      font: var(--typography-text-2xs-font);
+      letter-spacing: var(--typography-text-2xs-letter_spacing, 0);
+      text-transform: var(--typography-text-2xs-text_transform, none);
+
+      --chip-min-width: 64px;
+      --chip-height: var(--space-xl);
+      --chip-padding-x: var(--space-m);
+    }
+.ChipNext_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);
+
+      --chip-min-width: 72px;
+      --chip-height: var(--space-2xl);
+      --chip-padding-x: var(--space-l);
+    }
+.ChipNext_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);
+
+      --chip-min-width: 80px;
+      --chip-height: var(--space-3xl);
+      --chip-padding-x: 20px;
+    }
+.ChipNext_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);
+
+      --chip-min-width: 88px;
+      --chip-height: var(--space-4xl);
+      --chip-padding-x: var(--space-xl);
+    }
+.ChipNext_color_primary {
+      --chip-bg-color: var(--color-background-action-light);
+      --chip-bg-color-hover: var(--color-background-action-light-hover);
+      --chip-bg-color-active: var(--color-background-action-light-pressed);
+      --chip-text-color: var(--color-content-action-dark);
+    }
+.ChipNext_color_secondary {
+      --chip-bg-color: var(--color-background-secondary);
+      --chip-bg-color-hover: var(--color-background-secondary-hover);
+      --chip-bg-color-active: var(--color-background-secondary-pressed);
+      --chip-text-color: var(--color-content-primary);
+    }
+.ChipNext:hover {
+    --chip-bg-color: var(--chip-bg-color-hover);
+  }
+.ChipNext:active {
+    --chip-bg-color: var(--chip-bg-color-active);
+  }
+.ChipNext:focus {
+    box-shadow: var(--shadow-outline-focused);
+  }
+.ChipNext:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
+.ChipNext_checked,
+  .ChipNext_checked:hover,
+  .ChipNext_checked:active {
+    --chip-bg-color: var(--color-background-action);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_disabled {
+    --chip-bg-color: var(--color-background-disabled);
+    --chip-text-color: var(--color-content-disabled);
+    pointer-events: none;
+  }

package/__inner__/cjs/components/ChipNext/Chip.d.ts

@@ -0,0 +1,42 @@
+import './Chip.css';
+import type { ReactNode, MouseEvent, ElementType } from 'react';
+import type { IconProps, IconSize } from '@ozen-ui/icons';
+import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
+import { CHIP_DEFAULT_TAG } from './constants';
+export declare const cnChip: import("@bem-react/classname").ClassNameFormatter;
+export declare const chipSizeVariant: readonly ["xs", "s", "m", "l"];
+export declare const chipColorVariant: readonly ["primary", "secondary"];
+export type ChipSizeVariant = (typeof chipSizeVariant)[number];
+export type ChipColorVariant = (typeof chipColorVariant)[number];
+export type ChipIcon = RenderContentType<IconProps & {
+    size?: IconSize;
+}>['content'];
+export type ChipBaseProps = {
+    /** Размер компонента */
+    size?: ChipSizeVariant;
+    /** Вариант представления компонента */
+    color?: ChipColorVariant;
+    /** Если {true} компонент отображается как заблокированный */
+    disabled?: boolean;
+    /** Если {true} делает элемент выбранным */
+    checked?: boolean;
+    /** Обработчик нажатия */
+    onClick?: (e: MouseEvent<HTMLElement>, payload: {
+        checked: boolean;
+    }) => void;
+    /** Иконка слева */
+    iconLeft?: ChipIcon;
+    /** Иконка справа */
+    iconRight?: ChipIcon;
+    /** Если {true} разбивает длинный текст на несколько строк */
+    multiline?: boolean;
+    /** Дополнительные СSS-классы */
+    className?: string;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type ChipProps<As extends ElementType = typeof CHIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<ChipBaseProps, As>;
+export declare const Chip: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ChipBaseProps, "button">;

package/__inner__/cjs/components/ChipNext/Chip.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = exports.chipColorVariant = exports.chipSizeVariant = exports.cnChip = void 0;
+var tslib_1 = require("tslib");
+require("./Chip.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var useControlled_1 = require("../../hooks/useControlled");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var renderContent_1 = require("../../utils/renderContent");
+var constants_1 = require("./constants");
+exports.cnChip = (0, classname_1.cn)('ChipNext');
+exports.chipSizeVariant = ['xs', 's', 'm', 'l'];
+exports.chipColorVariant = ['primary', 'secondary'];
+exports.Chip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var _a = (0, useThemeProps_1.useThemeProps)({ name: 'ChipNext', props: inProps }), _b = _a.size, size = _b === void 0 ? constants_1.CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? constants_1.CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? constants_1.CHIP_DEFAULT_DISABLED : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, multiline = _a.multiline, className = _a.className, children = _a.children, onClick = _a.onClick, checkedProp = _a.checked, _e = _a.as, Tag = _e === void 0 ? constants_1.CHIP_DEFAULT_TAG : _e, dataTestId = _a["data-testid"], other = tslib_1.__rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", 'data-testid']);
+    var _f = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: checkedProp,
+        defaultValue: false,
+        name: 'ChipNext',
+        state: 'open',
+    }), 2), checkedState = _f[0], setCheckedState = _f[1];
+    var handleClick = function (event) {
+        if (disabled) {
+            return;
+        }
+        setCheckedState(!checkedState);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: !checkedState });
+    };
+    var renderIcon = function (content) {
+        return (0, renderContent_1.renderContent)({
+            content: content,
+            props: {
+                size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
+                className: (0, exports.cnChip)('Icon'),
+            },
+        });
+    };
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ type: "button", "data-testid": dataTestId, disabled: disabled }, other, { className: (0, exports.cnChip)({ size: size, disabled: disabled, color: color, multiline: multiline, checked: checkedState }, [className]), onClick: handleClick, ref: ref }),
+        renderIcon(iconLeft),
+        children && react_1.default.createElement("span", { className: (0, exports.cnChip)('Content') }, children),
+        renderIcon(iconRight)));
+});
+exports.Chip.displayName = 'Chip';

package/__inner__/cjs/components/ChipNext/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const CHIP_DEFAULT_TAG = "button";
+export declare const CHIP_DEFAULT_VARIANT = "primary";
+export declare const CHIP_DEFAULT_SIZE = "m";
+export declare const CHIP_DEFAULT_DISABLED = false;

package/__inner__/cjs/components/ChipNext/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHIP_DEFAULT_DISABLED = exports.CHIP_DEFAULT_SIZE = exports.CHIP_DEFAULT_VARIANT = exports.CHIP_DEFAULT_TAG = void 0;
+exports.CHIP_DEFAULT_TAG = 'button';
+exports.CHIP_DEFAULT_VARIANT = 'primary';
+exports.CHIP_DEFAULT_SIZE = 'm';
+exports.CHIP_DEFAULT_DISABLED = false;

package/__inner__/cjs/components/ChipNext/index.d.ts

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

package/__inner__/cjs/components/ChipNext/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Chip"), exports);

package/__inner__/cjs/components/FieldIcon/FieldIcon.d.ts

@@ -1,18 +1,15 @@
 import './FieldIcon.css';
-import type { ComponentPropsWithRef, ComponentRef, FC, ReactElement } from 'react';
+import type { ComponentPropsWithRef, ComponentRef } from 'react';
 import React from 'react';
 import type { IconProps, IconSize } from '@ozen-ui/icons';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { RenderContentType } from '../../utils/renderContent';
 export declare const FIELD_ICON_DEFAULT_TAG = "div";
 export type FieldIconRef = ComponentRef<typeof FIELD_ICON_DEFAULT_TAG>;
 export type FieldIconProps = ComponentPropsWithRef<typeof FIELD_ICON_DEFAULT_TAG> & {
-    icon?: string | ReactElement<IconProps & {
+    icon?: RenderContentType<IconProps & {
         size?: IconSize;
-    }> | (() => ReactElement<IconProps & {
-        size?: IconSize;
-    }>) | FC<IconProps & {
-        size?: IconSize;
-    }>;
+    }>['content'];
     size?: FormElementSizeVariant;
     children?: never;
 };