@ozen-ui/kit 0.63.1 → 0.65.0

package/__inner__/cjs/components/Title/modules/icon-button/index.js

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

package/__inner__/cjs/components/Title/modules/icon-button/types.d.ts

@@ -0,0 +1,6 @@
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
+import type { IconButtonBaseProps } from '../../../IconButtonNext';
+import type { TITLE_ICON_BUTTON_DEFAULT_TAG } from './constants';
+export type TitleIconButtonBaseProps = Omit<IconButtonBaseProps, 'size'>;
+export type TitleIconButtonProps<As extends ElementType = typeof TITLE_ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<TitleIconButtonBaseProps, As>;

package/__inner__/cjs/components/Title/modules/icon-button/types.js

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

package/__inner__/cjs/components/Title/modules/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon-button';
+export * from './tag';

package/__inner__/cjs/components/Title/modules/index.js

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

package/__inner__/cjs/components/Title/modules/tag/TitleTag.css

@@ -0,0 +1,4 @@
+.TitleTag {
+  background-color: var(--color-background-main);
+  color: var(--color-content-primary);
+}

package/__inner__/cjs/components/Title/modules/tag/TitleTag.d.ts

@@ -0,0 +1,3 @@
+import type { TitleTagBaseProps } from '../../../Title/modules/tag/types';
+export declare const cnTitleTag: import("@bem-react/classname").ClassNameFormatter;
+export declare const TitleTag: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TitleTagBaseProps, "div">;

package/__inner__/cjs/components/Title/modules/tag/TitleTag.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleTag = exports.cnTitleTag = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var classname_1 = require("../../../../utils/classname");
+var polymorphicComponentWithRef_1 = require("../../../../utils/polymorphicComponentWithRef");
+var TagNext_1 = require("../../../TagNext");
+var constants_1 = require("../../../Title/modules/tag/constants");
+exports.cnTitleTag = (0, classname_1.cn)('TitleTag');
+exports.TitleTag = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (props, ref) { return (react_1.default.createElement(TagNext_1.Tag, tslib_1.__assign({ as: constants_1.TITLE_TAG_DEFAULT_TAG }, props, { ref: ref, size: "xs", variant: "primary", color: "uncolored", className: (0, exports.cnTitleTag)('', [props.className]) }))); });

package/__inner__/cjs/components/Title/modules/tag/constants.d.ts

@@ -0,0 +1 @@
+export declare const TITLE_TAG_DEFAULT_TAG = "div";

package/__inner__/cjs/components/Title/modules/tag/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TITLE_TAG_DEFAULT_TAG = void 0;
+exports.TITLE_TAG_DEFAULT_TAG = 'div';

package/__inner__/cjs/components/Title/modules/tag/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TitleTag';
+export * from './types';

package/__inner__/cjs/components/Title/modules/tag/index.js

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

package/__inner__/cjs/components/Title/modules/tag/types.d.ts

@@ -0,0 +1,6 @@
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
+import type { TagBaseProps } from '../../../TagNext';
+import type { TITLE_TAG_DEFAULT_TAG } from './constants';
+export type TitleTagBaseProps = Omit<TagBaseProps, 'size' | 'color' | 'variant'>;
+export type TitleTagProps<As extends ElementType = typeof TITLE_TAG_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<TitleTagBaseProps, As>;

package/__inner__/cjs/components/Title/modules/tag/types.js

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

package/__inner__/cjs/components/Title/types.d.ts

@@ -0,0 +1,10 @@
+import type { ElementType } from 'react';
+import type { WithPartial } from '../../types/object/withPartial';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { TitleMainBaseProps, TitleSecondaryBaseProps } from './components';
+import type { TITLE_DEFAULT_TAG } from './constants';
+import type { TitleVariantValue } from './entities';
+export type TitleMainBasePartialProps = WithPartial<TitleMainBaseProps, 'size'>;
+export type TitleSecondaryBasePartialProps = WithPartial<TitleSecondaryBaseProps, 'size'>;
+export type TitleBaseProps = TitleVariantValue<'main', TitleMainBasePartialProps> | TitleVariantValue<'secondary', TitleSecondaryBasePartialProps> | TitleVariantValue<undefined, TitleMainBasePartialProps>;
+export type TitleProps<As extends ElementType = typeof TITLE_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<TitleBaseProps, As>;

package/__inner__/cjs/components/Title/types.js

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

package/__inner__/cjs/constants/environment/index.d.ts

@@ -0,0 +1,2 @@
+export * from './isDev';
+export * from './isProduction';

package/__inner__/cjs/constants/environment/index.js

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

package/__inner__/cjs/constants/environment/isDev.d.ts

@@ -0,0 +1 @@
+export declare const IS_DEV: boolean;

package/__inner__/cjs/constants/environment/isDev.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IS_DEV = void 0;
+var isProduction_1 = require("./isProduction");
+exports.IS_DEV = !isProduction_1.IS_PRODUCTION;

package/__inner__/cjs/constants/environment/isProduction.d.ts

@@ -0,0 +1 @@
+export declare const IS_PRODUCTION: boolean;

package/__inner__/cjs/constants/environment/isProduction.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IS_PRODUCTION = void 0;
+exports.IS_PRODUCTION = process.env.NODE_ENV === 'production';

package/__inner__/cjs/hooks/useStoredValue/index.d.ts

@@ -0,0 +1,3 @@
+export * from './utils';
+export * from './useStoredValue';
+export * from './types';

package/__inner__/cjs/hooks/useStoredValue/index.js

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

package/__inner__/cjs/hooks/useStoredValue/types.d.ts

@@ -0,0 +1,2 @@
+import type { MutableRefObject } from 'react';
+export type StoredValue<Value> = MutableRefObject<Value>;

package/__inner__/cjs/hooks/useStoredValue/types.js

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

package/__inner__/cjs/hooks/useStoredValue/useStoredValue.d.ts

@@ -0,0 +1,4 @@
+import type { StoredValue } from './types';
+export declare function useStoredValue<Value>(
+/** Изначальное значение */
+initialValue: Value | (() => Value)): StoredValue<Value>;

package/__inner__/cjs/hooks/useStoredValue/useStoredValue.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStoredValue = useStoredValue;
+var react_1 = require("react");
+var isFunction_1 = require("../../utils/isFunction");
+function useStoredValue(
+/** Изначальное значение */
+initialValue) {
+    var processedInitialValue = (0, react_1.useMemo)(function () {
+        if ((0, isFunction_1.isFunction)(initialValue)) {
+            return initialValue();
+        }
+        return initialValue;
+    }, []);
+    return (0, react_1.useRef)(processedInitialValue);
+}

package/__inner__/cjs/hooks/useStoredValue/utils.d.ts

@@ -0,0 +1,2 @@
+import type { StoredValue } from './types';
+export declare function isStoredValue(valueToCheck: unknown): valueToCheck is StoredValue<unknown>;

package/__inner__/cjs/hooks/useStoredValue/utils.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStoredValue = isStoredValue;
+function isStoredValue(valueToCheck) {
+    return (!!valueToCheck &&
+        typeof valueToCheck === 'object' &&
+        Object.prototype.hasOwnProperty.call(valueToCheck, 'current'));
+}

package/__inner__/cjs/types/object/withPartial.d.ts

@@ -0,0 +1,3 @@
+export type WithPartial<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]?: T[P];
+};

package/__inner__/cjs/types/object/withPartial.js

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

package/__inner__/cjs/utils/array/create-empty/createEmptyArray.d.ts

@@ -0,0 +1 @@
+export declare const createEmptyArray: (length: number) => null[];

package/__inner__/cjs/utils/array/create-empty/createEmptyArray.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEmptyArray = void 0;
+var create_filled_1 = require("../create-filled");
+var createEmptyArray = function (length) {
+    return (0, create_filled_1.createFilledArray)(length, null);
+};
+exports.createEmptyArray = createEmptyArray;

package/__inner__/cjs/utils/array/create-empty/index.d.ts

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

package/__inner__/cjs/utils/array/create-empty/index.js

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

package/__inner__/cjs/utils/array/create-filled/createFilledArray.d.ts

@@ -0,0 +1 @@
+export declare const createFilledArray: <Value>(length: number, value: Value) => Value[];

package/__inner__/cjs/utils/array/create-filled/createFilledArray.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFilledArray = void 0;
+var createFilledArray = function (length, value) {
+    return new Array(length).fill(value);
+};
+exports.createFilledArray = createFilledArray;

package/__inner__/cjs/utils/array/create-filled/index.d.ts

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

package/__inner__/cjs/utils/array/create-filled/index.js

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

package/__inner__/cjs/utils/array/index.d.ts

@@ -0,0 +1,2 @@
+export * from './create-empty';
+export * from './create-filled';

package/__inner__/cjs/utils/array/index.js

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

package/__inner__/cjs/utils/isFunction.d.ts

@@ -0,0 +1 @@
+export declare const isFunction: (data: unknown) => data is (...args: any[]) => any;

package/__inner__/cjs/utils/isFunction.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFunction = void 0;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+var isFunction = function (data) {
+    return typeof data === 'function';
+};
+exports.isFunction = isFunction;

package/__inner__/esm/components/ChipGroup/ChipGroup.css

@@ -0,0 +1,16 @@
+.ChipGroup {
+  display: flex;
+  flex-direction: column;
+}
+
+  .ChipGroup .FormGroup {
+    align-items: flex-start;
+  }
+
+  .ChipGroup .FormGroup_size_xs, .ChipGroup .FormGroup_size_s {
+        --form-group-gap: var(--spacing-xs);
+      }
+
+  .ChipGroup .FormGroup_size_m, .ChipGroup .FormGroup_size_l {
+        --form-group-gap: var(--spacing-s);
+      }

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

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

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

@@ -0,0 +1,49 @@
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import './ChipGroup.css';
+import React from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+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';
+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 _e = __read(useControlled({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'ChipGroup',
+        state: 'value',
+    }), 2), valueState = _e[0], setValueState = _e[1];
+    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);
+    };
+    return (React.createElement(Tag, __assign({ className: cnChipGroup({ size: size }, [className]), role: "group" }, other, { ref: ref }),
+        React.createElement(ChipGroupContext.Provider, { value: {
+                value: valueState,
+                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))));
+});
+ChipGroup.displayName = 'ChipGroup';

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

@@ -0,0 +1,10 @@
+import type { ChipColorVariant, ChipOnClick, ChipSizeVariant } from '../ChipNext';
+import type { ChipGroupValue } from './types';
+export type ChipGroupContextValue = {
+    onClick: ChipOnClick;
+    disabled?: boolean;
+    value?: ChipGroupValue;
+    size?: ChipSizeVariant;
+    color?: ChipColorVariant;
+};
+export declare const ChipGroupContext: import("react").Context<ChipGroupContextValue | undefined>;

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

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var ChipGroupContext = createContext(undefined);

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

@@ -0,0 +1,5 @@
+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_AS = "div";

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

@@ -0,0 +1,3 @@
+export var CHIP_GROUP_DEFAULT_DIRECTION = 'row';
+export var CHIP_GROUP_DEFAULT_SIZE = 'm';
+export var CHIP_GROUP_DEFAULT_AS = 'div';

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

@@ -0,0 +1,2 @@
+export * from './ChipGroup';
+export * from './types';

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

@@ -0,0 +1,2 @@
+export * from './ChipGroup';
+export * from './types';

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

@@ -0,0 +1,33 @@
+import type { ElementType, MouseEvent, ReactNode } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { ChipColorVariant, ChipSizeVariant } from '../ChipNext';
+import type { FormGroupDirectionVariant, 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 = {
+    /** Значение по умолчанию (неконтролируемое состояние) */
+    defaultValue?: ChipGroupValue;
+    /** Текущее значение */
+    value?: ChipGroupValue;
+    /** Вариант представления компонента */
+    color?: ChipColorVariant;
+    /** Размер */
+    size?: ChipSizeVariant;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Направление */
+    direction?: FormGroupDirectionVariant;
+    /** Событие изменения состояния */
+    onChange?: ChipGroupOnChange;
+    /** Если `true` делает элементы неактивными */
+    disabled?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+    /** Свойства FormTitle */
+    titleProps?: FormTitleProps;
+    /** Свойства FormGroup */
+    groupProps?: FormGroupProps;
+};
+export type ChipGroupProps<As extends ElementType = typeof CHIP_GROUP_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<ChipGroupBaseProps, As>;

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

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

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

@@ -1,5 +1,6 @@
 /* stylelint-disable */
 .ChipNext {
+  --chip-outline: var(--shadow-outline-focused);
   --chip-border-radius: 24px;
   --chip-text-wrap: nowrap;
   background-color: var(--chip-bg-color);
@@ -72,17 +73,53 @@
       --chip-padding-x: var(--spacing-m);
     }
 .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);
-    }
+    --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);
-    }
+    --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_color_main {
+    --chip-bg-color: var(--color-background-main);
+    --chip-bg-color-hover: var(--color-background-main-hover);
+    --chip-bg-color-active: var(--color-background-main-pressed);
+    --chip-text-color: var(--color-content-primary);
+  }
+.ChipNext_color_overlay {
+    --chip-bg-color: var(--color-background-overlay);
+    --chip-bg-color-hover: var(--color-background-overlay);
+    --chip-bg-color-active: var(--color-background-overlay);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_primary.ChipNext_checked {
+    --chip-bg-color: var(--color-background-action);
+    --chip-bg-color-hover: var(--color-background-action);
+    --chip-bg-color-active: var(--color-background-action);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_primary.ChipNext_checked.ChipNext_disabled {
+    --chip-bg-color: var(--color-background-action-active-disabled);
+    --chip-bg-color-hover: var(--color-background-action-active-disabled);
+    --chip-bg-color-active: var(--color-background-action-active-disabled);
+    --chip-text-color: var(--color-content-primary-inverse);
+  }
+.ChipNext_color_secondary.ChipNext_checked, .ChipNext_color_main.ChipNext_checked, .ChipNext_color_overlay.ChipNext_checked {
+    --chip-bg-color: var(--color-background-action-secondary);
+    --chip-bg-color-hover: var(--color-background-action-secondary);
+    --chip-bg-color-active: var(--color-background-action-secondary);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_secondary.ChipNext_checked.ChipNext_disabled, .ChipNext_color_main.ChipNext_checked.ChipNext_disabled, .ChipNext_color_overlay.ChipNext_checked.ChipNext_disabled {
+    --chip-bg-color: var(--color-background-action-secondary-active-disabled);
+    --chip-bg-color-hover: var(--color-background-action-secondary-active-disabled);
+    --chip-bg-color-active: var(--color-background-action-secondary-active-disabled);
+    --chip-text-color: var(--color-content-primary-inverse);
+  }
 .ChipNext:hover {
     --chip-bg-color: var(--chip-bg-color-hover);
   }
@@ -90,19 +127,15 @@
     --chip-bg-color: var(--chip-bg-color-active);
   }
 .ChipNext:focus {
-    box-shadow: var(--shadow-outline-focused);
+    box-shadow: var(--chip-outline);
   }
 .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-bg-color-hover: var(--color-background-disabled);
+    --chip-bg-color-active: var(--color-background-disabled);
     --chip-text-color: var(--color-content-disabled);
     pointer-events: none;
   }

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

@@ -1,18 +1,43 @@
 import { __assign, __read, __rest } from "tslib";
 import './Chip.css';
-import React from 'react';
+import React, { useContext } from 'react';
+import { logger } from '@ozen-ui/logger';
+import { IS_DEV } from '../../constants/environment';
 import { useControlled } from '../../hooks/useControlled';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { renderContent } from '../../utils/renderContent';
+import { ChipGroupContext } from '../ChipGroup/ChipGroupContext';
 import { CHIP_DEFAULT_TAG, CHIP_DEFAULT_SIZE, CHIP_DEFAULT_VARIANT, CHIP_DEFAULT_DISABLED, } from './constants';
 export var cnChip = cn('ChipNext');
 export var Chip = polymorphicComponentWithRef(function (inProps, ref) {
-    var _a = useThemeProps({ name: 'ChipNext', props: inProps }), _b = _a.size, size = _b === void 0 ? CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? 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 ? CHIP_DEFAULT_TAG : _e, dataTestId = _a["data-testid"], other = __rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", 'data-testid']);
+    var _a = useThemeProps({ name: 'ChipNext', props: inProps }), _b = _a.size, sizeProp = _b === void 0 ? CHIP_DEFAULT_SIZE : _b, _c = _a.color, colorProp = _c === void 0 ? CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabledProp = _d === void 0 ? 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 ? CHIP_DEFAULT_TAG : _e, value = _a.value, dataTestId = _a["data-testid"], other = __rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", "value", 'data-testid']);
+    var checked = checkedProp;
+    var size = sizeProp;
+    var disabled = disabledProp;
+    var color = colorProp;
+    var chipGroup = useContext(ChipGroupContext);
+    if (chipGroup) {
+        if (IS_DEV && 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 (inProps.size === undefined && chipGroup.size) {
+            size = chipGroup.size;
+        }
+        if (inProps.disabled === undefined && chipGroup.disabled !== undefined) {
+            disabled = chipGroup.disabled;
+        }
+        if (inProps.color === undefined && chipGroup.color) {
+            color = chipGroup.color;
+        }
+    }
     var _f = __read(useControlled({
-        value: checkedProp,
+        value: checked,
         defaultValue: false,
         name: 'ChipNext',
         state: 'open',
@@ -21,8 +46,10 @@ export var Chip = polymorphicComponentWithRef(function (inProps, ref) {
         if (disabled) {
             return;
         }
-        setCheckedState(!checkedState);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: !checkedState });
+        var newCheckedState = !checkedState;
+        setCheckedState(newCheckedState);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: newCheckedState, value: value });
+        chipGroup === null || chipGroup === void 0 ? void 0 : chipGroup.onClick(event, { checked: newCheckedState, value: value });
     };
     var renderIcon = function (content) {
         return renderContent({

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

@@ -3,11 +3,15 @@ import type { IconProps } from '@ozen-ui/icons';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { RenderContentType } from '../../utils/renderContent';
 import type { CHIP_DEFAULT_TAG } from './constants';
+export declare const chipColorVariant: readonly ["primary", "secondary", "main", "overlay"];
+export type ChipColorVariant = (typeof chipColorVariant)[number];
 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>['content'];
+export type ChipOnClick = (event: MouseEvent<HTMLElement>, payload: {
+    checked: boolean;
+    value: string | undefined;
+}) => void;
 export type ChipBaseProps = {
     /** Размер компонента */
     size?: ChipSizeVariant;
@@ -18,9 +22,9 @@ export type ChipBaseProps = {
     /** Если `true` делает элемент выбранным */
     checked?: boolean;
     /** Обработчик нажатия */
-    onClick?: (e: MouseEvent<HTMLElement>, payload: {
-        checked: boolean;
-    }) => void;
+    onClick?: ChipOnClick;
+    /** Значение chip */
+    value?: string;
     /** Иконка слева */
     iconLeft?: ChipIcon;
     /** Иконка справа */

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

@@ -1,2 +1,9 @@
+// ---- COLOR ----
+export var chipColorVariant = [
+    'primary',
+    'secondary',
+    'main',
+    'overlay',
+];
+// ---- SIZE ----
 export var chipSizeVariant = ['xs', 's', 'm', 'l'];
-export var chipColorVariant = ['primary', 'secondary'];