@ozen-ui/kit 0.79.0 → 0.80.0

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

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

package/__inner__/cjs/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__/cjs/components/AutocompleteNext/components/AutocompleteRenderRight/AutocompleteRenderRight.js

@@ -13,7 +13,7 @@ var AutocompleteRenderRight = function (_a) {
     var _b = tslib_1.__read((0, FieldControl_1.useFieldControl)(), 1), _c = _b[0], focused = _c.focused, hovered = _c.hovered;
     var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
     var renderedIcon = react_1.default.createElement(FieldIcon_1.FieldIcon, { icon: renderRight });
-    var clearButton = (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, icon: icons_1.CrossIcon, variant: "function", title: clearText, "aria-label": clearText, onClick: function (e) {
+    var clearButton = (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, icon: icons_1.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: (0, index_1.cnAutocomplete)('ClearButton', {
@@ -24,7 +24,7 @@ var AutocompleteRenderRight = function (_a) {
         renderRightPosition === 'before' && renderedIcon,
         !disableClearButton && isVisibleClearButton && clearButton,
         renderRightPosition === 'between' && renderedIcon,
-        !disableShowChevron && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", disabled: disabled, title: open ? closeText : openText, "aria-label": open ? closeText : openText, icon: open ? icons_1.ChevronUpIcon : icons_1.ChevronDownIcon, onClick: function (e) {
+        !disableShowChevron && (react_1.default.createElement(IconButtonNext_1.IconButton, { size: size, type: "button", tabIndex: -1, variant: "ghost", color: "tertiary", disabled: disabled, title: open ? closeText : openText, "aria-label": open ? closeText : openText, icon: open ? icons_1.ChevronUpIcon : icons_1.ChevronDownIcon, onClick: function (e) {
                 e.preventDefault();
                 onOpen();
             }, compressed: true })),

package/__inner__/cjs/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__/cjs/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__/cjs/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__/cjs/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__/cjs/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__/cjs/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__/cjs/components/ChipGroup/ChipGroup.js

@@ -3,50 +3,117 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChipGroup = exports.cnChipGroup = void 0;
 var tslib_1 = require("tslib");
 require("./ChipGroup.css");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var useControlled_1 = require("../../hooks/useControlled");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
+var utils_1 = require("../../utils");
 var classname_1 = require("../../utils/classname");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var FieldHint_1 = require("../FieldHint");
 var FormGroup_1 = require("../FormGroup");
 var FormTitle_1 = require("../FormTitle");
 var ChipGroupContext_1 = require("./ChipGroupContext");
 var constants_1 = require("./constants");
+var entities_1 = require("./entities");
 exports.cnChipGroup = (0, classname_1.cn)('ChipGroup');
 exports.ChipGroup = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'ChipGroup',
     });
-    var _a = props.direction, direction = _a === void 0 ? constants_1.CHIP_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? constants_1.CHIP_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? constants_1.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 = tslib_1.__rest(props, ["direction", "size", "as", "color", "title", "className", "children", "value", "defaultValue", "onChange", "disabled", "titleProps", "groupProps"]);
+    var _a = props.direction, direction = _a === void 0 ? constants_1.CHIP_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? constants_1.CHIP_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? constants_1.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 ? constants_1.CHIP_GROUP_DEFAULT_MODE : _d, hint = props.hint, other = tslib_1.__rest(props, ["direction", "size", "as", "color", "title", "className", "children", "value", "defaultValue", "onChange", "disabled", "titleProps", "groupProps", "mode", "hint"]);
+    var defaultValue = (0, react_1.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 = tslib_1.__read((0, useControlled_1.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);
+    };
+    (0, react_1.useEffect)(function () {
+        if (mode === 'checkbox') {
+            if ((0, utils_1.isString)(valueState)) {
+                var value = [valueState];
+                setValue(value, null);
+                return;
+            }
+            if (valueState === null) {
+                setValue([], null);
+                return;
+            }
+            return;
+        }
+        if (mode === 'radio') {
+            if (!(0, utils_1.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 ((0, utils_1.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; })
-            : tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__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; })
+                : tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__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(entities_1.chipGroupModeVariant)));
     };
     return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnChipGroup)({ size: size }, [className]), role: "group" }, other, { ref: ref }),
         react_1.default.createElement(ChipGroupContext_1.ChipGroupContext.Provider, { value: {
                 value: valueState,
+                valueArray: valueArray,
                 onClick: onClick,
                 size: size,
                 disabled: disabled,
                 color: color,
             } },
             title && (react_1.default.createElement(FormTitle_1.FormTitle, tslib_1.__assign({ size: size }, titleProps), title)),
-            react_1.default.createElement(FormGroup_1.FormGroup, tslib_1.__assign({ direction: direction, size: size }, groupProps), children))));
+            react_1.default.createElement(FormGroup_1.FormGroup, tslib_1.__assign({ direction: direction, size: size }, groupProps), children),
+            react_1.default.createElement(FieldHint_1.FieldHint, { size: constants_1.CHIP_GROUP_SIZE_TO_HINT_SIZE[size], error: color === 'error', disabled: disabled }, hint))));
 });
 exports.ChipGroup.displayName = 'ChipGroup';

package/__inner__/cjs/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__/cjs/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__/cjs/components/ChipGroup/constants.js

@@ -1,6 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CHIP_GROUP_DEFAULT_AS = exports.CHIP_GROUP_DEFAULT_SIZE = exports.CHIP_GROUP_DEFAULT_DIRECTION = void 0;
+exports.CHIP_GROUP_SIZE_TO_HINT_SIZE = exports.CHIP_GROUP_DEFAULT_MODE = exports.CHIP_GROUP_DEFAULT_AS = exports.CHIP_GROUP_DEFAULT_SIZE = exports.CHIP_GROUP_DEFAULT_DIRECTION = void 0;
 exports.CHIP_GROUP_DEFAULT_DIRECTION = 'row';
 exports.CHIP_GROUP_DEFAULT_SIZE = 'm';
 exports.CHIP_GROUP_DEFAULT_AS = 'div';
+exports.CHIP_GROUP_DEFAULT_MODE = 'checkbox';
+exports.CHIP_GROUP_SIZE_TO_HINT_SIZE = {
+    xs: 's',
+    s: 's',
+    m: 'l',
+    l: 'l',
+};

package/__inner__/cjs/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__/cjs/components/ChipGroup/entities/direction.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipGroupDirection = void 0;
+var FormGroup_1 = require("../../FormGroup");
+exports.chipGroupDirection = FormGroup_1.formGroupDirectionVariant;

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

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

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

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

package/__inner__/cjs/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__/cjs/components/ChipGroup/entities/mode.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipGroupModeVariant = void 0;
+exports.chipGroupModeVariant = ['checkbox', 'radio'];

package/__inner__/cjs/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__/cjs/components/ChipGroup/entities/onChange.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/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__/cjs/components/ChipGroup/entities/value.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./entities"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./ChipGroup"), exports);
 tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/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__/cjs/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__/cjs/components/ChipNext/Chip.js

@@ -26,8 +26,8 @@ exports.Chip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(fu
         if (environment_1.isDev && value === undefined) {
             logger_1.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__/cjs/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__/cjs/components/ChipNext/entities/color.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipColorVariant = void 0;
+exports.chipColorVariant = [
+    'primary',
+    'secondary',
+    'main',
+    'overlay',
+    'error',
+];

package/__inner__/cjs/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__/cjs/components/ChipNext/entities/events.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/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__/cjs/components/ChipNext/entities/icon.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

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

package/__inner__/cjs/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__/cjs/components/ChipNext/entities/size.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipSizeVariant = void 0;
+exports.chipSizeVariant = ['xs', 's', 'm', 'l'];

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

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

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

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