@ozen-ui/kit 0.79.0 → 0.81.0

package/__inner__/cjs/utils/test-utils.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderInAct = exports.render = void 0;
+exports.createTestConsumer = exports.TestConsumer = exports.renderInAct = exports.render = void 0;
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var react_2 = require("@testing-library/react");
 var OzenProvider_1 = require("../components/OzenProvider");
 var WithProviders = function (_a) {
@@ -30,6 +30,23 @@ var renderInAct = function (ui, options) { return tslib_1.__awaiter(void 0, void
     });
 }); };
 exports.renderInAct = renderInAct;
+var TestConsumer = function (_a) {
+    var context = _a.context, onValue = _a.onValue;
+    var contextValue = (0, react_1.useContext)(context);
+    (0, react_1.useEffect)(function () {
+        onValue(contextValue);
+    }, [contextValue]);
+    return null;
+};
+exports.TestConsumer = TestConsumer;
+var createTestConsumer = function (context) {
+    var Component = function (_a) {
+        var onValue = _a.onValue;
+        return react_1.default.createElement(exports.TestConsumer, { context: context, onValue: onValue });
+    };
+    return Component;
+};
+exports.createTestConsumer = createTestConsumer;
 var matches = function () {
     var args = [];
     for (var _i = 0; _i < arguments.length; _i++) {

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInput/components/AutocompleteBaseRenderRight/AutocompleteBaseRenderRight.js

@@ -11,7 +11,7 @@ export var AutocompleteBaseRenderRight = function (_a) {
     var open = dropdownControl.isOpen;
     var _c = __read(useFieldControl(), 1), _d = _c[0], focused = _d.focused, hovered = _d.hovered;
     var isVisibleClearButton = !!(hovered || open || focused) && valueControl.hasValue;
-    var clearButton = (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, icon: CrossIcon, variant: "function", title: clearText, "aria-label": clearText, onClick: function (event) {
+    var clearButton = (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, icon: CrossIcon, variant: "function", color: "tertiary", title: clearText, "aria-label": clearText, onClick: function (event) {
             event.preventDefault();
             clear(event);
         }, className: cnAutocompleteBaseInput('ClearButton', {
@@ -22,7 +22,7 @@ export var AutocompleteBaseRenderRight = function (_a) {
         suffixPosition === 'before' && suffix,
         showClearButton && isVisibleClearButton && clearButton,
         suffixPosition === 'between' && suffix,
-        showChevron && (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", disabled: disabled, title: open ? closeText : openText, "aria-label": open ? closeText : openText, icon: open ? ChevronUpIcon : ChevronDownIcon, onClick: function (event) {
+        showChevron && (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", color: "tertiary", disabled: disabled, title: open ? closeText : openText, "aria-label": open ? closeText : openText, icon: open ? ChevronUpIcon : ChevronDownIcon, onClick: function (event) {
                 event.preventDefault();
                 dropdownControl.toggle();
             }, compressed: true })),

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseInputIcon/types.d.ts

@@ -1,4 +1,3 @@
-import type { FieldIconProps } from '../../../FieldIcon';
-import type { TagRef } from '../../../TagNext';
+import type { FieldIconProps, FieldIconRef } from '../../../FieldIcon';
 export type AutocompleteBaseInputIconProps = Omit<FieldIconProps, 'size'>;
-export type AutocompleteBaseInputIconRef = TagRef;
+export type AutocompleteBaseInputIconRef = FieldIconRef;

package/__inner__/esm/components/AutocompleteNext/components/AutocompleteRenderRight/AutocompleteRenderRight.js

@@ -10,7 +10,7 @@ export var AutocompleteRenderRight = function (_a) {
     var _b = __read(useFieldControl(), 1), _c = _b[0], focused = _c.focused, hovered = _c.hovered;
     var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
     var renderedIcon = React.createElement(FieldIcon, { icon: renderRight });
-    var clearButton = (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, icon: CrossIcon, variant: "function", title: clearText, "aria-label": clearText, onClick: function (e) {
+    var clearButton = (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, icon: CrossIcon, variant: "function", color: "tertiary", title: clearText, "aria-label": clearText, onClick: function (e) {
             e.preventDefault();
             onClear === null || onClear === void 0 ? void 0 : onClear(e);
         }, className: cnAutocomplete('ClearButton', {
@@ -21,7 +21,7 @@ export var AutocompleteRenderRight = function (_a) {
         renderRightPosition === 'before' && renderedIcon,
         !disableClearButton && isVisibleClearButton && clearButton,
         renderRightPosition === 'between' && renderedIcon,
-        !disableShowChevron && (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", disabled: disabled, title: open ? closeText : openText, "aria-label": open ? closeText : openText, icon: open ? ChevronUpIcon : ChevronDownIcon, onClick: function (e) {
+        !disableShowChevron && (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", color: "tertiary", disabled: disabled, title: open ? closeText : openText, "aria-label": open ? closeText : openText, icon: open ? ChevronUpIcon : ChevronDownIcon, onClick: function (e) {
                 e.preventDefault();
                 onOpen();
             }, compressed: true })),

package/__inner__/esm/components/BottomSheetBase/modules/BottomSheetBaseBlock/BottomSheetBaseBlock.d.ts

@@ -1,6 +1,5 @@
 import './BottomSheetBaseBlock.css';
 import React from 'react';
+import type { BottomSheetBaseBlockProps } from './types';
 export declare const cnBottomSheetBaseBlock: import("@bem-react/classname").ClassNameFormatter;
-export declare const BottomSheetBaseBlock: React.ForwardRefExoticComponent<{
-    expandOnDrag?: boolean;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "expandOnDrag"> & React.RefAttributes<HTMLDivElement>>;
+export declare const BottomSheetBaseBlock: React.ForwardRefExoticComponent<Omit<BottomSheetBaseBlockProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/BottomSheetBase/modules/BottomSheetBaseBlock/types.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 import type { ExtendableProps } from '../../../../types/ExtendableProps';
 export type BottomSheetBaseBlockProps = ExtendableProps<{
     expandOnDrag?: boolean;
-}, ComponentPropsWithoutRef<'div'>>;
+}, ComponentPropsWithRef<'div'>>;

package/__inner__/esm/components/BottomSheetBase/modules/BottomSheetBaseFooter/BottomSheetBaseFooter.d.ts

@@ -1,5 +1,3 @@
 import React from 'react';
 export declare const cnBottomSheetBaseFooter: import("@bem-react/classname").ClassNameFormatter;
-export declare const BottomSheetBaseFooter: React.ForwardRefExoticComponent<{
-    expandOnDrag?: boolean;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "expandOnDrag"> & React.RefAttributes<HTMLDivElement>>;
+export declare const BottomSheetBaseFooter: React.ForwardRefExoticComponent<Omit<import("../BottomSheetBaseBlock").BottomSheetBaseBlockProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/BottomSheetBase/modules/BottomSheetBaseHeader/BottomSheetBaseHeader.d.ts

@@ -1,5 +1,3 @@
 import React from 'react';
 export declare const cnBottomSheetBaseHeader: import("@bem-react/classname").ClassNameFormatter;
-export declare const BottomSheetBaseHeader: React.ForwardRefExoticComponent<{
-    expandOnDrag?: boolean;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "expandOnDrag"> & React.RefAttributes<HTMLDivElement>>;
+export declare const BottomSheetBaseHeader: React.ForwardRefExoticComponent<Omit<import("../BottomSheetBaseBlock").BottomSheetBaseBlockProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/ButtonNext/Button.css

@@ -101,10 +101,10 @@
     --button-bg-color-hover: var(--color-background-action-secondary-hover);
     --button-bg-color-active: var(--color-background-action-secondary-pressed);
     --button-bg-color-focus: var(--color-background-action-secondary-hover);
-    --button-font-color: var(--color-content-action-on);
-    --button-font-color-hover: var(--color-content-action-on);
-    --button-font-color-active: var(--color-content-action-on);
-    --button-font-color-focus: var(--color-content-action-on);
+    --button-font-color: var(--color-content-primary-inverse);
+    --button-font-color-hover: var(--color-content-primary-inverse);
+    --button-font-color-active: var(--color-content-primary-inverse);
+    --button-font-color-focus: var(--color-content-primary-inverse);
   }
 .ButtonNext_variant_contained.ButtonNext_color_tertiary {
     --button-bg-color: var(--color-background-tertiary);
@@ -132,16 +132,16 @@
     --button-bg-color-hover: var(--color-background-action-light-hover);
     --button-bg-color-active: var(--color-background-action-light-pressed);
     --button-bg-color-focus: var(--color-background-action-light-hover);
-    --button-font-color: var(--color-content-action);
-    --button-font-color-hover: var(--color-content-action);
-    --button-font-color-active: var(--color-content-action);
-    --button-font-color-focus: var(--color-content-action);
+    --button-font-color: var(--color-content-action-dark);
+    --button-font-color-hover: var(--color-content-action-dark);
+    --button-font-color-active: var(--color-content-action-dark);
+    --button-font-color-focus: var(--color-content-action-dark);
   }
 .ButtonNext_variant_contained-additional.ButtonNext_color_secondary {
-    --button-bg-color: var(--color-background-secondary);
-    --button-bg-color-hover: var(--color-background-secondary-hover);
-    --button-bg-color-active: var(--color-background-secondary-pressed);
-    --button-bg-color-focus: var(--color-background-secondary-hover);
+    --button-bg-color: var(--color-background-action-secondary-light);
+    --button-bg-color-hover: var(--color-background-action-secondary-light-hover);
+    --button-bg-color-active: var(--color-background-action-secondary-light-pressed);
+    --button-bg-color-focus: var(--color-background-action-secondary-light-hover);
     --button-font-color: var(--color-content-primary);
     --button-font-color-hover: var(--color-content-primary);
     --button-font-color-active: var(--color-content-primary);
@@ -162,10 +162,10 @@
     --button-bg-color-hover: var(--color-background-error-light-hover);
     --button-bg-color-active: var(--color-background-error-light-pressed);
     --button-bg-color-focus: var(--color-background-error-light-hover);
-    --button-font-color: var(--color-content-error);
-    --button-font-color-hover: var(--color-content-error);
-    --button-font-color-active: var(--color-content-error);
-    --button-font-color-focus: var(--color-content-error);
+    --button-font-color: var(--color-content-error-dark);
+    --button-font-color-hover: var(--color-content-error-dark);
+    --button-font-color-active: var(--color-content-error-dark);
+    --button-font-color-focus: var(--color-content-error-dark);
   }
 /** ghost */
 .ButtonNext_variant_ghost.ButtonNext_color_primary {
@@ -180,13 +180,13 @@
   }
 .ButtonNext_variant_ghost.ButtonNext_color_secondary {
     --button-bg-color: transparent;
-    --button-bg-color-hover: var(--color-background-secondary-hover);
-    --button-bg-color-active: var(--color-background-secondary-pressed);
-    --button-bg-color-focus: var(--color-background-secondary-hover);
-    --button-font-color: var(--color-content-primary);
-    --button-font-color-hover: var(--color-content-primary);
-    --button-font-color-active: var(--color-content-primary);
-    --button-font-color-focus: var(--color-content-primary);
+    --button-bg-color-hover: var(--color-background-action-secondary-light-hover);
+    --button-bg-color-active: var(--color-background-action-secondary-light-pressed);
+    --button-bg-color-focus: var(--color-background-action-secondary-light-hover);
+    --button-font-color: var(--color-content-action-secondary);
+    --button-font-color-hover: var(--color-content-action-secondary);
+    --button-font-color-active: var(--color-content-action-secondary);
+    --button-font-color-focus: var(--color-content-action-secondary);
   }
 .ButtonNext_variant_ghost.ButtonNext_color_tertiary {
     --button-bg-color: transparent;
@@ -228,13 +228,13 @@
     --button-font-color: var(--color-content-action);
     --button-font-color-hover: var(--color-background-action-hover);
     --button-font-color-active: var(--color-background-action-pressed);
-    --button-font-color-focus: var(--color-background-action-pressed);
+    --button-font-color-focus: var(--color-background-action-hover);
   }
 .ButtonNext_variant_function.ButtonNext_color_secondary {
     --button-font-color: var(--color-content-action-secondary);
     --button-font-color-hover: var(--color-content-action-secondary-hover);
     --button-font-color-active: var(--color-content-action-secondary-pressed);
-    --button-font-color-focus: var(--color-content-action-secondary-pressed);
+    --button-font-color-focus: var(--color-content-action-secondary-hover);
   }
 .ButtonNext_variant_function.ButtonNext_color_tertiary {
     --button-font-color: var(--color-content-secondary);
@@ -246,7 +246,7 @@
     --button-font-color: var(--color-content-error);
     --button-font-color-hover: var(--color-content-error-hover);
     --button-font-color-active: var(--color-content-error-pressed);
-    --button-font-color-focus: var(--color-content-error-pressed);
+    --button-font-color-focus: var(--color-content-error-hover);
   }
 /** disabled & loading */
 .ButtonNext_variant_contained.ButtonNext_disabled,

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

@@ -1,4 +1,4 @@
 import './ChipGroup.css';
-import type { ChipGroupBaseProps } from './types';
+import type { ChipGroupComponent } from './types';
 export declare const cnChipGroup: import("@bem-react/classname").ClassNameFormatter;
-export declare const ChipGroup: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ChipGroupBaseProps, "div", "as">;
+export declare const ChipGroup: ChipGroupComponent;

package/__inner__/esm/components/ChipGroup/ChipGroup.js

@@ -1,49 +1,116 @@
 import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './ChipGroup.css';
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useControlled } from '../../hooks/useControlled';
 import { useThemeProps } from '../../hooks/useThemeProps';
+import { isArray, isString } from '../../utils';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { FieldHint } from '../FieldHint';
 import { FormGroup } from '../FormGroup';
 import { FormTitle } from '../FormTitle';
 import { ChipGroupContext } from './ChipGroupContext';
-import { CHIP_GROUP_DEFAULT_AS, CHIP_GROUP_DEFAULT_DIRECTION, CHIP_GROUP_DEFAULT_SIZE, } from './constants';
+import { CHIP_GROUP_DEFAULT_AS, CHIP_GROUP_DEFAULT_DIRECTION, CHIP_GROUP_DEFAULT_MODE, CHIP_GROUP_DEFAULT_SIZE, CHIP_GROUP_SIZE_TO_HINT_SIZE, } from './constants';
+import { chipGroupModeVariant } from './entities';
 export var cnChipGroup = cn('ChipGroup');
 export var ChipGroup = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'ChipGroup',
     });
-    var _a = props.direction, direction = _a === void 0 ? CHIP_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? CHIP_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? CHIP_GROUP_DEFAULT_AS : _c, color = props.color, title = props.title, className = props.className, children = props.children, valueProp = props.value, _d = props.defaultValue, defaultValue = _d === void 0 ? [] : _d, onChange = props.onChange, disabled = props.disabled, titleProps = props.titleProps, groupProps = props.groupProps, other = __rest(props, ["direction", "size", "as", "color", "title", "className", "children", "value", "defaultValue", "onChange", "disabled", "titleProps", "groupProps"]);
+    var _a = props.direction, direction = _a === void 0 ? CHIP_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? CHIP_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? CHIP_GROUP_DEFAULT_AS : _c, color = props.color, title = props.title, className = props.className, children = props.children, valueProp = props.value, defaultValueProp = props.defaultValue, onChange = props.onChange, disabled = props.disabled, titleProps = props.titleProps, groupProps = props.groupProps, _d = props.mode, mode = _d === void 0 ? CHIP_GROUP_DEFAULT_MODE : _d, hint = props.hint, other = __rest(props, ["direction", "size", "as", "color", "title", "className", "children", "value", "defaultValue", "onChange", "disabled", "titleProps", "groupProps", "mode", "hint"]);
+    var defaultValue = useMemo(function () {
+        if (defaultValueProp !== undefined) {
+            return defaultValueProp;
+        }
+        if (mode === 'checkbox') {
+            return [];
+        }
+        if (mode === 'radio') {
+            return null;
+        }
+        throw new Error("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u0430\u0442\u044C mode \"".concat(mode, "\""));
+    }, []);
     var _e = __read(useControlled({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'ChipGroup',
         state: 'value',
     }), 2), valueState = _e[0], setValueState = _e[1];
+    var setValue = function (value, event) {
+        setValueState(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+    };
+    useEffect(function () {
+        if (mode === 'checkbox') {
+            if (isString(valueState)) {
+                var value = [valueState];
+                setValue(value, null);
+                return;
+            }
+            if (valueState === null) {
+                setValue([], null);
+                return;
+            }
+            return;
+        }
+        if (mode === 'radio') {
+            if (!isArray(valueState)) {
+                return;
+            }
+            if (valueState.length > 0) {
+                setValue(valueState[0], null);
+                return;
+            }
+            setValue(null, null);
+            return;
+        }
+        throw new Error("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u0430\u0442\u044C \u0440\u0435\u0436\u0438\u043C \"".concat(mode, "\"."));
+    }, [mode]);
+    var valueArray = (function () {
+        if (!valueState) {
+            return [];
+        }
+        if (isString(valueState)) {
+            return [valueState];
+        }
+        return valueState;
+    })();
     var onClick = function (event, payload) {
         var itemValue = payload.value;
         if (itemValue === undefined) {
             return;
         }
-        var requiredValueState = valueState !== null && valueState !== void 0 ? valueState : [];
-        var isValueAlreadyChecked = requiredValueState.includes(itemValue);
-        var value = isValueAlreadyChecked
-            ? requiredValueState.filter(function (item) { return item !== itemValue; })
-            : __spreadArray(__spreadArray([], __read(requiredValueState), false), [itemValue], false);
-        setValueState(value);
-        onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+        var isValueAlreadyChecked = valueArray.includes(itemValue);
+        if (mode === 'checkbox') {
+            var value = isValueAlreadyChecked
+                ? valueArray.filter(function (item) { return item !== itemValue; })
+                : __spreadArray(__spreadArray([], __read(valueArray), false), [itemValue], false);
+            setValueState(value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+            return;
+        }
+        if (mode === 'radio') {
+            if (isValueAlreadyChecked) {
+                return;
+            }
+            setValueState(itemValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(itemValue, event);
+            return;
+        }
+        throw new Error("\u041D\u0435\u043E\u0436\u0438\u0434\u0430\u043D\u043D\u044B\u0439 mode \"".concat(mode, "\". \u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u044B: ").concat(JSON.stringify(chipGroupModeVariant)));
     };
     return (React.createElement(Tag, __assign({ className: cnChipGroup({ size: size }, [className]), role: "group" }, other, { ref: ref }),
         React.createElement(ChipGroupContext.Provider, { value: {
                 value: valueState,
+                valueArray: valueArray,
                 onClick: onClick,
                 size: size,
                 disabled: disabled,
                 color: color,
             } },
             title && (React.createElement(FormTitle, __assign({ size: size }, titleProps), title)),
-            React.createElement(FormGroup, __assign({ direction: direction, size: size }, groupProps), children))));
+            React.createElement(FormGroup, __assign({ direction: direction, size: size }, groupProps), children),
+            React.createElement(FieldHint, { size: CHIP_GROUP_SIZE_TO_HINT_SIZE[size], error: color === 'error', disabled: disabled }, hint))));
 });
 ChipGroup.displayName = 'ChipGroup';

package/__inner__/esm/components/ChipGroup/ChipGroupContext.d.ts

@@ -1,9 +1,10 @@
 import type { ChipColorVariant, ChipOnClick, ChipSizeVariant } from '../ChipNext';
-import type { ChipGroupValue } from './types';
+import type { ChipGroupValue, ChipGroupValueArray } from './entities';
 export type ChipGroupContextValue = {
     onClick: ChipOnClick;
     disabled?: boolean;
     value?: ChipGroupValue;
+    valueArray?: ChipGroupValueArray;
     size?: ChipSizeVariant;
     color?: ChipColorVariant;
 };

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

@@ -1,5 +1,7 @@
+import type { FormElementSizeVariant } from '../../types';
 import type { ChipSizeVariant } from '../ChipNext';
-import type { FormGroupDirectionVariant } from '../FormGroup';
-export declare const CHIP_GROUP_DEFAULT_DIRECTION: FormGroupDirectionVariant;
-export declare const CHIP_GROUP_DEFAULT_SIZE: ChipSizeVariant;
+export declare const CHIP_GROUP_DEFAULT_DIRECTION = "row";
+export declare const CHIP_GROUP_DEFAULT_SIZE = "m";
 export declare const CHIP_GROUP_DEFAULT_AS = "div";
+export declare const CHIP_GROUP_DEFAULT_MODE = "checkbox";
+export declare const CHIP_GROUP_SIZE_TO_HINT_SIZE: Readonly<Record<ChipSizeVariant, FormElementSizeVariant>>;

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

@@ -1,3 +1,10 @@
 export var CHIP_GROUP_DEFAULT_DIRECTION = 'row';
 export var CHIP_GROUP_DEFAULT_SIZE = 'm';
 export var CHIP_GROUP_DEFAULT_AS = 'div';
+export var CHIP_GROUP_DEFAULT_MODE = 'checkbox';
+export var CHIP_GROUP_SIZE_TO_HINT_SIZE = {
+    xs: 's',
+    s: 's',
+    m: 'l',
+    l: 'l',
+};

package/__inner__/esm/components/ChipGroup/entities/direction.d.ts

@@ -0,0 +1,2 @@
+export declare const chipGroupDirection: readonly ["row", "column", "rowReverse", "columnReverse"];
+export type ChipGroupDirection = (typeof chipGroupDirection)[number];

package/__inner__/esm/components/ChipGroup/entities/direction.js

@@ -0,0 +1,2 @@
+import { formGroupDirectionVariant } from '../../FormGroup';
+export var chipGroupDirection = formGroupDirectionVariant;

package/__inner__/esm/components/ChipGroup/entities/index.d.ts

@@ -0,0 +1,4 @@
+export * from './direction';
+export * from './mode';
+export * from './onChange';
+export * from './value';

package/__inner__/esm/components/ChipGroup/entities/index.js

@@ -0,0 +1,4 @@
+export * from './direction';
+export * from './mode';
+export * from './onChange';
+export * from './value';

package/__inner__/esm/components/ChipGroup/entities/mode.d.ts

@@ -0,0 +1,2 @@
+export declare const chipGroupModeVariant: readonly ["checkbox", "radio"];
+export type ChipGroupModeVariant = (typeof chipGroupModeVariant)[number];

package/__inner__/esm/components/ChipGroup/entities/mode.js

@@ -0,0 +1 @@
+export var chipGroupModeVariant = ['checkbox', 'radio'];

package/__inner__/esm/components/ChipGroup/entities/onChange.d.ts

@@ -0,0 +1,4 @@
+import type { MouseEvent } from 'react';
+import type { ChipGroupModeVariant } from './mode';
+import type { ChipGroupValue } from './value';
+export type ChipGroupOnChange<Mode extends ChipGroupModeVariant = ChipGroupModeVariant> = (value: ChipGroupValue<Mode>, event: MouseEvent<HTMLElement> | null) => void;

package/__inner__/esm/components/ChipGroup/entities/onChange.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/ChipGroup/entities/value.d.ts

@@ -0,0 +1,3 @@
+import type { ChipGroupModeVariant } from './mode';
+export type ChipGroupValueArray = string[];
+export type ChipGroupValue<Mode extends ChipGroupModeVariant = ChipGroupModeVariant> = Mode extends 'checkbox' ? ChipGroupValueArray : string | null;

package/__inner__/esm/components/ChipGroup/entities/value.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,2 +1,4 @@
+export * from './entities';
+export * from './constants';
 export * from './ChipGroup';
 export * from './types';

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

@@ -1,2 +1,4 @@
+export * from './entities';
+export * from './constants';
 export * from './ChipGroup';
 export * from './types';

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

@@ -1,16 +1,17 @@
-import type { ElementType, MouseEvent, ReactNode } from 'react';
-import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { ComponentRef, ElementType, ReactNode } from 'react';
+import type { WithDisplayName } from '../../types';
+import type { PolymorphicComponentPropsWithoutRef, PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { ChipColorVariant, ChipSizeVariant } from '../ChipNext';
-import type { FormGroupDirectionVariant, FormGroupProps } from '../FormGroup';
+import type { FieldHintProps } from '../FieldHint';
+import type { FormGroupProps } from '../FormGroup';
 import type { FormTitleProps } from '../FormTitle';
-import type { CHIP_GROUP_DEFAULT_AS } from './constants';
-export type ChipGroupValue = string[];
-export type ChipGroupOnChange = (value: ChipGroupValue, event: MouseEvent<HTMLElement>) => void;
-export type ChipGroupBaseProps = {
+import type { CHIP_GROUP_DEFAULT_AS, CHIP_GROUP_DEFAULT_MODE } from './constants';
+import type { ChipGroupValue, ChipGroupOnChange, ChipGroupModeVariant, ChipGroupDirection } from './entities';
+export type ChipGroupBaseProps<Mode extends ChipGroupModeVariant = ChipGroupModeVariant> = {
     /** Значение по умолчанию (неконтролируемое состояние) */
-    defaultValue?: ChipGroupValue;
+    defaultValue?: ChipGroupValue<Mode>;
     /** Текущее значение */
-    value?: ChipGroupValue;
+    value?: ChipGroupValue<Mode>;
     /** Вариант представления компонента */
     color?: ChipColorVariant;
     /** Размер */
@@ -18,9 +19,9 @@ export type ChipGroupBaseProps = {
     /** Содержимое компонента */
     children?: ReactNode;
     /** Направление */
-    direction?: FormGroupDirectionVariant;
+    direction?: ChipGroupDirection;
     /** Событие изменения состояния */
-    onChange?: ChipGroupOnChange;
+    onChange?: ChipGroupOnChange<Mode>;
     /** Если `true` делает элементы неактивными */
     disabled?: boolean;
     /** Идентификатор компонента для тестов */
@@ -29,5 +30,13 @@ export type ChipGroupBaseProps = {
     titleProps?: FormTitleProps;
     /** Свойства FormGroup */
     groupProps?: FormGroupProps;
+    /** Режим работы */
+    mode?: Mode;
+    /** Дополнительное описание */
+    hint?: ReactNode;
+    /** Параметры дополнительного описания */
+    hintProps?: FieldHintProps;
 };
-export type ChipGroupProps<As extends ElementType = typeof CHIP_GROUP_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<ChipGroupBaseProps, As>;
+export type ChipGroupProps<Mode extends ChipGroupModeVariant = typeof CHIP_GROUP_DEFAULT_MODE, As extends ElementType = typeof CHIP_GROUP_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<ChipGroupBaseProps<Mode>, As>;
+export type ChipGroupComponent = WithDisplayName<(<Mode extends ChipGroupModeVariant = typeof CHIP_GROUP_DEFAULT_MODE, As extends ElementType = typeof CHIP_GROUP_DEFAULT_AS>(props: PolymorphicComponentPropsWithRef<ChipGroupBaseProps<Mode>, As>) => ReactNode)>;
+export type ChipGroupRef<As extends ElementType = typeof CHIP_GROUP_DEFAULT_AS> = ComponentRef<As>;

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

@@ -96,6 +96,12 @@
     --chip-bg-color-active: var(--color-background-overlay);
     --chip-text-color: var(--color-content-action-on);
   }
+.ChipNext_color_error {
+    --chip-bg-color: var(--color-background-error-light);
+    --chip-bg-color-hover: var(--color-background-error-light);
+    --chip-bg-color-active: var(--color-background-error-light);
+    --chip-text-color: var(--color-content-error);
+  }
 .ChipNext_color_primary.ChipNext_checked {
     --chip-bg-color: var(--color-background-action);
     --chip-bg-color-hover: var(--color-background-action);

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

@@ -23,8 +23,8 @@ export var Chip = polymorphicComponentWithRef(function (inProps, ref) {
         if (isDev && value === undefined) {
             logger.error('Отсутствует параметр "value" для Chip, находящегося в ChipGroup.');
         }
-        if (checked === undefined && chipGroup.value) {
-            checked = chipGroup === null || chipGroup === void 0 ? void 0 : chipGroup.value.includes(value);
+        if (checked === undefined && chipGroup.valueArray) {
+            checked = chipGroup.valueArray.includes(value);
         }
         if (inProps.size === undefined && chipGroup.size) {
             size = chipGroup.size;

package/__inner__/esm/components/ChipNext/entities/color.d.ts

@@ -0,0 +1,2 @@
+export declare const chipColorVariant: readonly ["primary", "secondary", "main", "overlay", "error"];
+export type ChipColorVariant = (typeof chipColorVariant)[number];

package/__inner__/esm/components/ChipNext/entities/color.js

@@ -0,0 +1,7 @@
+export var chipColorVariant = [
+    'primary',
+    'secondary',
+    'main',
+    'overlay',
+    'error',
+];

package/__inner__/esm/components/ChipNext/entities/events.d.ts

@@ -0,0 +1,5 @@
+import type { MouseEvent } from 'react';
+export type ChipOnClick = (event: MouseEvent<HTMLElement>, payload: {
+    checked: boolean;
+    value: string | undefined;
+}) => void;

package/__inner__/esm/components/ChipNext/entities/events.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/ChipNext/entities/icon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from '@ozen-ui/icons';
+import type { RenderContentType } from '../../../utils';
+export type ChipIcon = RenderContentType<IconProps>['content'];

package/__inner__/esm/components/ChipNext/entities/icon.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/ChipNext/entities/index.d.ts

@@ -0,0 +1,4 @@
+export * from './color';
+export * from './events';
+export * from './icon';
+export * from './size';

package/__inner__/esm/components/ChipNext/entities/index.js

@@ -0,0 +1,4 @@
+export * from './color';
+export * from './events';
+export * from './icon';
+export * from './size';

package/__inner__/esm/components/ChipNext/entities/size.d.ts

@@ -0,0 +1,2 @@
+export declare const chipSizeVariant: readonly ["xs", "s", "m", "l"];
+export type ChipSizeVariant = (typeof chipSizeVariant)[number];

package/__inner__/esm/components/ChipNext/entities/size.js

@@ -0,0 +1 @@
+export var chipSizeVariant = ['xs', 's', 'm', 'l'];

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

@@ -1,2 +1,4 @@
+export * from './entities';
+export * from './constants';
 export * from './Chip';
 export * from './types';

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

@@ -1,2 +1,4 @@
+export * from './entities';
+export * from './constants';
 export * from './Chip';
 export * from './types';