@ozen-ui/kit 0.78.0 → 0.80.0

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';

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

@@ -1,17 +1,7 @@
-import type { ElementType, MouseEvent, ReactNode } from 'react';
-import type { IconProps } from '@ozen-ui/icons';
+import type { ComponentRef, ElementType, ReactNode } from 'react';
 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 type ChipSizeVariant = (typeof chipSizeVariant)[number];
-export type ChipIcon = RenderContentType<IconProps>['content'];
-export type ChipOnClick = (event: MouseEvent<HTMLElement>, payload: {
-    checked: boolean;
-    value: string | undefined;
-}) => void;
+import type { ChipColorVariant, ChipSizeVariant, ChipOnClick, ChipIcon } from './entities';
 export type ChipBaseProps = {
     /** Размер компонента */
     size?: ChipSizeVariant;
@@ -39,3 +29,4 @@ export type ChipBaseProps = {
     'data-testid'?: string;
 };
 export type ChipProps<As extends ElementType = typeof CHIP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<ChipBaseProps, As>;
+export type ChipRef<As extends ElementType = typeof CHIP_DEFAULT_TAG> = ComponentRef<As>;

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

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

package/__inner__/esm/components/DataListCard/DataListCard.js

@@ -9,7 +9,7 @@ import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWit
 import { DataListBase } from '../DataListBase';
 import { ListCardContext } from '../ListCard';
 import { DataListCardNoOption, DataListCardLoading } from './components';
-import { DATA_LIST_CARD_DEFAULT_LOADING, DATA_LIST_CARD_DEFAULT_SHADOW, DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS, DATA_LIST_CARD_DEFAULT_TAG, DATA_LIST_CARD_RADIUS_BY_SIZE, DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME, DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO, DATA_LIST_CARD_DEFAULT_INTERACTIVE, DATA_LIST_CARD_DEFAULT_SIZE, } from './constants';
+import { DATA_LIST_CARD_DEFAULT_LOADING, DATA_LIST_CARD_DEFAULT_SHADOW, DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS, DATA_LIST_CARD_DEFAULT_TAG, DATA_LIST_CARD_RADIUS_BY_SIZE, DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME, DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO, DATA_LIST_CARD_DEFAULT_INTERACTIVE, DATA_LIST_CARD_DEFAULT_SIZE, DATA_LIST_CARD_DEFAULT_ALIGN, } from './constants';
 import { DataListCardContext } from './DataListCardContext';
 export var cnDataListCard = cn('DataListCard');
 var DataListCardRender = function (inProps, ref) {
@@ -17,7 +17,7 @@ var DataListCardRender = function (inProps, ref) {
         props: inProps,
         name: 'DataListCard',
     });
-    var className = props.className, children = props.children, _a = props.as, as = _a === void 0 ? DATA_LIST_CARD_DEFAULT_TAG : _a, active = props.active, _b = props.size, size = _b === void 0 ? DATA_LIST_CARD_DEFAULT_SIZE : _b, borderColorScheme = props.borderColorScheme, _c = props.backgroundColorScheme, backgroundColorScheme = _c === void 0 ? DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME : _c, _d = props.interactive, interactive = _d === void 0 ? DATA_LIST_CARD_DEFAULT_INTERACTIVE : _d, _e = props.contentTrailingRatio, contentTrailingRatio = _e === void 0 ? DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO : _e, _f = props.shadow, shadow = _f === void 0 ? DATA_LIST_CARD_DEFAULT_SHADOW : _f, radiusProp = props.radius, _g = props.loading, loading = _g === void 0 ? DATA_LIST_CARD_DEFAULT_LOADING : _g, loadingText = props.loadingText, _h = props.showNoOptions, showNoOptions = _h === void 0 ? DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS : _h, noOptionsText = props.noOptionsText, other = __rest(props, ["className", "children", "as", "active", "size", "borderColorScheme", "backgroundColorScheme", "interactive", "contentTrailingRatio", "shadow", "radius", "loading", "loadingText", "showNoOptions", "noOptionsText"]);
+    var className = props.className, children = props.children, _a = props.as, as = _a === void 0 ? DATA_LIST_CARD_DEFAULT_TAG : _a, active = props.active, _b = props.size, size = _b === void 0 ? DATA_LIST_CARD_DEFAULT_SIZE : _b, borderColorScheme = props.borderColorScheme, _c = props.backgroundColorScheme, backgroundColorScheme = _c === void 0 ? DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME : _c, _d = props.interactive, interactive = _d === void 0 ? DATA_LIST_CARD_DEFAULT_INTERACTIVE : _d, _e = props.contentTrailingRatio, contentTrailingRatio = _e === void 0 ? DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO : _e, _f = props.shadow, shadow = _f === void 0 ? DATA_LIST_CARD_DEFAULT_SHADOW : _f, radiusProp = props.radius, _g = props.loading, loading = _g === void 0 ? DATA_LIST_CARD_DEFAULT_LOADING : _g, loadingText = props.loadingText, _h = props.showNoOptions, showNoOptions = _h === void 0 ? DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS : _h, noOptionsText = props.noOptionsText, _j = props.align, align = _j === void 0 ? DATA_LIST_CARD_DEFAULT_ALIGN : _j, padding = props.padding, other = __rest(props, ["className", "children", "as", "active", "size", "borderColorScheme", "backgroundColorScheme", "interactive", "contentTrailingRatio", "shadow", "radius", "loading", "loadingText", "showNoOptions", "noOptionsText", "align", "padding"]);
     var radius = radiusProp !== null && radiusProp !== void 0 ? radiusProp : DATA_LIST_CARD_RADIUS_BY_SIZE[size];
     return (React.createElement(ListCardContext.Provider, { value: {
             variant: 'list',
@@ -26,6 +26,8 @@ var DataListCardRender = function (inProps, ref) {
             backgroundColorScheme: backgroundColorScheme,
             interactive: interactive,
             contentTrailingRatio: contentTrailingRatio,
+            align: align,
+            padding: padding,
         } },
         React.createElement(DataListCardContext.Provider, { value: {
                 size: size,

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

@@ -9,6 +9,7 @@ export declare const DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME: {
 };
 export declare const DATA_LIST_CARD_DEFAULT_INTERACTIVE = true;
 export declare const DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = 0.85;
+export declare const DATA_LIST_CARD_DEFAULT_ALIGN = "start";
 export declare const DATA_LIST_CARD_DEFAULT_LOADING = false;
 export declare const DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS = true;
 export declare const DATA_LIST_CARD_DEFAULT_SHADOW = "l";

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

@@ -1,10 +1,11 @@
 import { DATA_LIST_BASE_DEFAULT_TAG } from '../DataListBase/constants';
-import { LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME, LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO, LIST_CARD_DEFAULT_INTERACTIVE, LIST_CARD_DEFAULT_SIZE, } from '../ListCard';
+import { LIST_CARD_DEFAULT_ALIGN, LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME, LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO, LIST_CARD_DEFAULT_INTERACTIVE, LIST_CARD_DEFAULT_SIZE, } from '../ListCard';
 export var DATA_LIST_CARD_DEFAULT_TAG = DATA_LIST_BASE_DEFAULT_TAG;
 export var DATA_LIST_CARD_DEFAULT_SIZE = LIST_CARD_DEFAULT_SIZE;
 export var DATA_LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME = LIST_CARD_DEFAULT_BACKGROUND_COLOR_SCHEME;
 export var DATA_LIST_CARD_DEFAULT_INTERACTIVE = LIST_CARD_DEFAULT_INTERACTIVE;
 export var DATA_LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO = LIST_CARD_DEFAULT_CONTENT_TRAILING_RATIO;
+export var DATA_LIST_CARD_DEFAULT_ALIGN = LIST_CARD_DEFAULT_ALIGN;
 export var DATA_LIST_CARD_DEFAULT_LOADING = false;
 export var DATA_LIST_CARD_DEFAULT_SHOW_NO_OPTIONS = true;
 export var DATA_LIST_CARD_DEFAULT_SHADOW = 'l';

package/__inner__/esm/components/DatePicker/components/DateInput/types.d.ts

@@ -3,7 +3,7 @@ import type { ExtendableComponentPropsWithRef } from '../../../../types';
 import type { CalendarSteps } from '../../../Calendar';
 import type { FIELD_CONTROL_DEFAULT_TAG } from '../../../FieldControl';
 import type { InputProps } from '../../../Input';
-import type { InputPropPlaceholder } from '../../types';
+import type { InputPropPlaceholder } from '../../entities';
 export type DateInputRef = ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
 export type DateInputProps = ExtendableComponentPropsWithRef<{
     steps: CalendarSteps;

package/__inner__/esm/components/DatePicker/components/DatePickerModeDateRange/DatePickerModeDateRange.js

@@ -21,7 +21,7 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     minDate = props.minDate, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    maxDate = props.maxDate, _b = props.steps, steps = _b === void 0 ? DATE_PICKER_DEFAULT_STEPS : _b, _c = props.initialStep, initialStep = _c === void 0 ? DATE_PICKER_DEFAULT_INITIAL_STEP : _c, other = __rest(props, ["size", "error", "open", "label", "onKeyDown", "onInputChange", "renderLeft", "renderRight", "required", "fullWidth", "placeholder", "hint", "disableStroke", "hintProps", "onChange", "labelProps", "popoverProps", "calendarProps", "defaultOpen", "onClose", "defaultValue", "value", "inputProps", "disabled", "className", "calendars", "onError", "clearText", "disableCloseOnSelect", "disableClearButton", "onOpen", "fieldsProps", "minDate", "maxDate", "steps", "initialStep"]);
+    maxDate = props.maxDate, _b = props.steps, steps = _b === void 0 ? DATE_PICKER_DEFAULT_STEPS : _b, _c = props.initialStep, initialStep = _c === void 0 ? DATE_PICKER_DEFAULT_INITIAL_STEP : _c, background = props.background, other = __rest(props, ["size", "error", "open", "label", "onKeyDown", "onInputChange", "renderLeft", "renderRight", "required", "fullWidth", "placeholder", "hint", "disableStroke", "hintProps", "onChange", "labelProps", "popoverProps", "calendarProps", "defaultOpen", "onClose", "defaultValue", "value", "inputProps", "disabled", "className", "calendars", "onError", "clearText", "disableCloseOnSelect", "disableClearButton", "onOpen", "fieldsProps", "minDate", "maxDate", "steps", "initialStep", "background"]);
     var _d = __read(getValueForDoubleProp(label), 2), labelFrom = _d[0], labelTo = _d[1];
     var _e = __read(getValueForDoubleProp(renderLeft), 2), renderLeftFrom = _e[0], renderLeftTo = _e[1];
     var _f = __read(getValueForDoubleProp(renderRight), 2), renderRightFrom = _f[0], renderRightTo = _f[1];
@@ -261,8 +261,8 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
             disableStroke: disableStroke,
         }, [className]) }, other, { ref: rootRef }),
         React.createElement(Stack, __assign({ gap: "l", className: cnDatePicker('Fields', [fieldsProps === null || fieldsProps === void 0 ? void 0 : fieldsProps.className]) }, fieldsProps, { ref: fieldsRef }),
-            React.createElement(DateInput, { size: size, error: error, label: labelFrom, required: required, disabled: disabled, value: inputValueFrom, onKeyDown: handleKeyDown, renderLeft: renderLeftFrom, labelProps: labelPropsFrom, disableStroke: disableStroke, steps: steps, placeholder: placeholderFrom, renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, hasValue: !!valueFrom, clearText: clearText, renderRight: renderRightFrom, onClear: handleClear('from'), disableClearButton: disableClearButton }), inputProps: __assign(__assign({ autoComplete: 'off' }, inputPropsFrom), { onBlur: handleBlurInputFrom, onFocus: handleFocusInputFrom, onClick: handleClickOnInputFrom, onChange: handleChangeInputFrom, onPaste: handlePasteInputFrom }), "data-testid": "date-input-from", bodyProps: { 'aria-expanded': open } }),
-            React.createElement(DateInput, { size: size, error: error, label: labelTo, required: required, disabled: disabled, value: inputValueTo, onKeyDown: handleKeyDown, renderLeft: renderLeftTo, labelProps: labelPropsTo, placeholder: placeholderTo, disableStroke: disableStroke, steps: steps, renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, hasValue: !!valueTo, clearText: clearText, renderRight: renderRightTo, onClear: handleClear('to'), disableClearButton: disableClearButton }), inputProps: __assign(__assign({ autoComplete: 'off' }, inputPropsTo), { onBlur: handleBlurInputTo, onFocus: handleFocusInputTo, onClick: handleClickOnInputTo, onChange: handleChangeInputTo, onPaste: handlePasteInputTo }), "data-testid": "date-input-to", bodyProps: { ref: dateInputToRef, 'aria-expanded': open } })),
+            React.createElement(DateInput, { size: size, error: error, label: labelFrom, required: required, disabled: disabled, value: inputValueFrom, onKeyDown: handleKeyDown, renderLeft: renderLeftFrom, labelProps: labelPropsFrom, disableStroke: disableStroke, steps: steps, placeholder: placeholderFrom, renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, hasValue: !!valueFrom, clearText: clearText, renderRight: renderRightFrom, onClear: handleClear('from'), disableClearButton: disableClearButton }), background: background, inputProps: __assign(__assign({ autoComplete: 'off' }, inputPropsFrom), { onBlur: handleBlurInputFrom, onFocus: handleFocusInputFrom, onClick: handleClickOnInputFrom, onChange: handleChangeInputFrom, onPaste: handlePasteInputFrom }), "data-testid": "date-input-from", bodyProps: { 'aria-expanded': open } }),
+            React.createElement(DateInput, { size: size, error: error, label: labelTo, required: required, disabled: disabled, value: inputValueTo, onKeyDown: handleKeyDown, renderLeft: renderLeftTo, labelProps: labelPropsTo, placeholder: placeholderTo, disableStroke: disableStroke, background: background, steps: steps, renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, hasValue: !!valueTo, clearText: clearText, renderRight: renderRightTo, onClear: handleClear('to'), disableClearButton: disableClearButton }), inputProps: __assign(__assign({ autoComplete: 'off' }, inputPropsTo), { onBlur: handleBlurInputTo, onFocus: handleFocusInputTo, onClick: handleClickOnInputTo, onChange: handleChangeInputTo, onPaste: handlePasteInputTo }), "data-testid": "date-input-to", bodyProps: { ref: dateInputToRef, 'aria-expanded': open } })),
         React.createElement(FieldHint, __assign({ size: size, error: error, disabled: disabled }, hintProps), hint),
         React.createElement(Popover, __assign({ open: open, anchorRef: anchorRef, onClose: handleClose }, popoverProps, { onExited: handleExited, ignoreClickOutsideRefs: [containerRef], disableEnforceFocus: disableEnforceFocus }),
             React.createElement(Calendar, __assign({ calendars: calendars }, calendarProps, { initialStep: initialStep, steps: steps, mode: "range", offsetDate: offsetDate, onChange: handleChangeCalendar, value: formatDateForCalendar(value), onCalendarsChange: onCalendarsChange, onOffsetDateChange: onOffsetDateChange })))));