@ozen-ui/kit 0.79.0 → 0.80.0

package/__inner__/esm/components/DialogNext/modules/DialogHeader/index.js

@@ -1,2 +1,3 @@
+export * from './constants';
 export * from './DialogHeader';
 export * from './types';

package/__inner__/esm/components/DialogNext/modules/DialogIllustration/DialogIllustration.css

@@ -0,0 +1,5 @@
+.DialogNextIllustration {
+  block-size: 80px;
+  inline-size: 80px;
+  margin-block-end: var(--spacing-m);
+}

package/__inner__/esm/components/DialogNext/modules/DialogIllustration/DialogIllustration.d.ts

@@ -0,0 +1,3 @@
+import type { DialogIllustrationBaseProps } from './types';
+export declare const cnDialogIllustration: import("@bem-react/classname").ClassNameFormatter;
+export declare const DialogIllustration: import("../../../../utils").PolymorphicComponentWithRef<DialogIllustrationBaseProps, "div", "as">;

package/__inner__/esm/components/DialogNext/modules/DialogIllustration/DialogIllustration.js

@@ -0,0 +1,10 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { polymorphicComponentWithRef, cn } from '../../../../utils';
+import { DIALOG_ILLUSTRATION_DEFAULT_TAG } from './constants';
+export var cnDialogIllustration = cn('DialogNextIllustration');
+export var DialogIllustration = polymorphicComponentWithRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.as, Tag = _b === void 0 ? DIALOG_ILLUSTRATION_DEFAULT_TAG : _b, other = __rest(_a, ["children", "className", "as"]);
+    return (React.createElement(Tag, __assign({}, other, { ref: ref, className: cnDialogIllustration('', [className]) }), children));
+});
+DialogIllustration.displayName = 'DialogIllustration';

package/__inner__/esm/components/DialogNext/modules/DialogIllustration/constants.d.ts

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

package/__inner__/esm/components/DialogNext/modules/DialogIllustration/constants.js

@@ -0,0 +1 @@
+export var DIALOG_ILLUSTRATION_DEFAULT_TAG = 'div';

package/__inner__/esm/components/DialogNext/modules/DialogIllustration/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './DialogIllustration';
+export * from './types';

package/__inner__/esm/components/DialogNext/modules/DialogIllustration/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './DialogIllustration';
+export * from './types';

package/__inner__/esm/components/DialogNext/modules/DialogIllustration/types.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../../utils';
+import type { DIALOG_ILLUSTRATION_DEFAULT_TAG } from './constants';
+export type DialogIllustrationRef<As extends ElementType = typeof DIALOG_ILLUSTRATION_DEFAULT_TAG> = ComponentRef<As>;
+export type DialogIllustrationBaseProps = {
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type DialogIllustrationProps<As extends ElementType = typeof DIALOG_ILLUSTRATION_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<DialogIllustrationBaseProps, As>;

package/__inner__/esm/components/DialogNext/modules/DialogIllustration/types.js

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

package/__inner__/esm/components/DialogNext/modules/DialogTitle/index.d.ts

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

package/__inner__/esm/components/DialogNext/modules/DialogTitle/index.js

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

package/__inner__/esm/components/DialogNext/modules/index.d.ts

@@ -4,5 +4,6 @@ export * from './DialogFooter';
 export * from './DialogFooterButton';
 export * from './DialogFooterButtonsGroup';
 export * from './DialogHeader';
+export * from './DialogIllustration';
 export * from './DialogSubtitle';
 export * from './DialogTitle';

package/__inner__/esm/components/DialogNext/modules/index.js

@@ -4,5 +4,6 @@ export * from './DialogFooter';
 export * from './DialogFooterButton';
 export * from './DialogFooterButtonsGroup';
 export * from './DialogHeader';
+export * from './DialogIllustration';
 export * from './DialogSubtitle';
 export * from './DialogTitle';

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

@@ -7,7 +7,7 @@ import type { DialogDeviceType, DialogSizeVariantByDeviceType, DialogVariant } f
 export type DialogRef = HTMLDivElement;
 export type DialogRenderCloseButton = RenderContentTypeEmptyProps['content'];
 export type DialogContentBottomSheetProps = Omit<DialogBottomSheetProps, 'hideCloseButton' | 'backdrop' | 'open' | 'size' | 'variant' | 'closeButton' | 'onClose' | 'className'>;
-export type DialogContentModalProps = Omit<DialogModalProps, 'open' | 'onClose' | 'hideCloseButton' | 'className' | 'closeButton' | 'size' | 'variant'>;
+export type DialogContentModalProps = Omit<DialogModalProps, 'open' | 'onClose' | 'hideCloseButton' | 'className' | 'closeButton' | 'size' | 'variant' | 'children'>;
 export type DialogBaseProps = {
     /** Если `true`, будет отображаться окно диалога */
     open: boolean;

package/__inner__/esm/components/FilePicker/FilePicker.js

@@ -63,7 +63,7 @@ export var FilePicker = forwardRef(function (inProps, ref) {
                 React.createElement("input", __assign({ id: id, name: name, accept: accept, multiple: multiple, onBlur: handleBlur, required: required, disabled: disabled, autoFocus: autoFocus, onFocus: handleFocus, className: cnFilePicker('Input') }, inputProps, { type: "file", onChange: onChange, onKeyDown: onKeyDown, ref: useMultiRef([inputRef || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.ref), inputInnerRef]) })),
                 hasFiles ? (React.createElement("span", { className: cnFilePicker('FileName') }, renderValue(fileList, disableTruncate))) : (React.createElement("span", { "aria-placeholder": placeholder, className: cnFilePicker('Placeholder') }, placeholder))),
             React.createElement("div", { className: cnFilePicker('RenderRight') },
-                onClearProp && (React.createElement(IconButton, { size: size, tabIndex: -1, icon: CrossIcon, onClick: onClear, variant: "function", "aria-label": clearText, className: cnFilePicker('ClearButton', {
+                onClearProp && (React.createElement(IconButton, { size: size, tabIndex: -1, icon: CrossIcon, color: "tertiary", onClick: onClear, variant: "function", "aria-label": clearText, className: cnFilePicker('ClearButton', {
                         visibility: hasFiles,
                     }) })),
                 React.createElement(FieldIcon, { icon: renderRight })),

package/__inner__/esm/components/IconButtonNext/IconButton.css

@@ -90,10 +90,10 @@
       --color-content-action-secondary-pressed
     );
     --icon-button-bg-color-focus: var(--color-content-action-secondary-hover);
-    --icon-button-font-color: var(--color-content-action-on);
-    --icon-button-font-color-hover: var(--color-content-action-on);
-    --icon-button-font-color-active: var(--color-content-action-on);
-    --icon-button-font-color-focus: var(--color-content-action-on);
+    --icon-button-font-color: var(--color-content-primary-inverse);
+    --icon-button-font-color-hover: var(--color-content-primary-inverse);
+    --icon-button-font-color-active: var(--color-content-primary-inverse);
+    --icon-button-font-color-focus: var(--color-content-primary-inverse);
   }
 
   .IconButtonNext_variant_contained.IconButtonNext_color_tertiary {
@@ -125,17 +125,17 @@
     --icon-button-bg-color-hover: var(--color-background-action-light-hover);
     --icon-button-bg-color-active: var(--color-background-action-light-pressed);
     --icon-button-bg-color-focus: var(--color-background-action-light-hover);
-    --icon-button-font-color: var(--color-content-action);
-    --icon-button-font-color-hover: var(--color-content-action);
-    --icon-button-font-color-active: var(--color-content-action);
-    --icon-button-font-color-focus: var(--color-content-action);
+    --icon-button-font-color: var(--color-content-action-dark);
+    --icon-button-font-color-hover: var(--color-content-action-dark);
+    --icon-button-font-color-active: var(--color-content-action-dark);
+    --icon-button-font-color-focus: var(--color-content-action-dark);
   }
 
   .IconButtonNext_variant_contained-additional.IconButtonNext_color_secondary {
-    --icon-button-bg-color: var(--color-background-secondary);
-    --icon-button-bg-color-hover: var(--color-background-secondary-hover);
-    --icon-button-bg-color-active: var(--color-background-secondary-pressed);
-    --icon-button-bg-color-focus: var(--color-background-secondary-hover);
+    --icon-button-bg-color: var(--color-background-action-secondary-light);
+    --icon-button-bg-color-hover: var(--color-background-action-secondary-light-hover);
+    --icon-button-bg-color-active: var(--color-background-action-secondary-light-pressed);
+    --icon-button-bg-color-focus: var(--color-background-action-secondary-light-hover);
     --icon-button-font-color: var(--color-content-primary);
     --icon-button-font-color-hover: var(--color-content-primary);
     --icon-button-font-color-active: var(--color-content-primary);
@@ -158,10 +158,10 @@
     --icon-button-bg-color-hover: var(--color-background-error-light-hover);
     --icon-button-bg-color-active: var(--color-background-error-light-pressed);
     --icon-button-bg-color-focus: var(--color-background-error-light-hover);
-    --icon-button-font-color: var(--color-content-error);
-    --icon-button-font-color-hover: var(--color-content-error);
-    --icon-button-font-color-active: var(--color-content-error);
-    --icon-button-font-color-focus: var(--color-content-error);
+    --icon-button-font-color: var(--color-content-error-dark);
+    --icon-button-font-color-hover: var(--color-content-error-dark);
+    --icon-button-font-color-active: var(--color-content-error-dark);
+    --icon-button-font-color-focus: var(--color-content-error-dark);
   }
 
   /** ghost */
@@ -179,9 +179,9 @@
 
   .IconButtonNext_variant_ghost.IconButtonNext_color_secondary {
     --icon-button-bg-color: transparent;
-    --icon-button-bg-color-hover: var(--color-background-secondary-hover);
-    --icon-button-bg-color-active: var(--color-background-secondary-pressed);
-    --icon-button-bg-color-focus: var(--color-background-secondary-hover);
+    --icon-button-bg-color-hover: var(--color-background-action-secondary-light);
+    --icon-button-bg-color-active: var(--color-background-action-secondary-light-pressed);
+    --icon-button-bg-color-focus: var(--color-background-action-secondary-light-hover);
     --icon-button-font-color: var(--color-content-primary);
     --icon-button-font-color-hover: var(--color-content-primary);
     --icon-button-font-color-active: var(--color-content-primary);
@@ -230,32 +230,28 @@
     --icon-button-font-color: var(--color-content-action);
     --icon-button-font-color-hover: var(--color-background-action-hover);
     --icon-button-font-color-active: var(--color-background-action-pressed);
-    --icon-button-font-color-focus: var(--color-background-action-pressed);
+    --icon-button-font-color-focus: var(--color-background-action-hover);
   }
 
   .IconButtonNext_variant_function.IconButtonNext_color_secondary {
     --icon-button-font-color: var(--color-content-action-secondary);
     --icon-button-font-color-hover: var(--color-content-action-secondary-hover);
-    --icon-button-font-color-active: var(
-      --color-content-action-secondary-pressed
-    );
-    --icon-button-font-color-focus: var(
-      --color-content-action-secondary-pressed
-    );
+    --icon-button-font-color-active: var(--color-content-action-secondary-pressed);
+    --icon-button-font-color-focus: var(--color-content-action-secondary-hover);
   }
 
   .IconButtonNext_variant_function.IconButtonNext_color_tertiary {
     --icon-button-font-color: var(--color-content-secondary);
-    --icon-button-font-color-hover: var(--color-content-secondary);
-    --icon-button-font-color-active: var(--color-content-secondary);
-    --icon-button-font-color-focus: var(--color-content-secondary);
+    --icon-button-font-color-hover: var(--color-content-primary);
+    --icon-button-font-color-active: var(--color-content-primary);
+    --icon-button-font-color-focus: var(--color-content-primary);
   }
 
   .IconButtonNext_variant_function.IconButtonNext_color_error {
     --icon-button-font-color: var(--color-content-error);
     --icon-button-font-color-hover: var(--color-content-error-hover);
     --icon-button-font-color-active: var(--color-content-error-pressed);
-    --icon-button-font-color-focus: var(--color-content-error-pressed);
+    --icon-button-font-color-focus: var(--color-content-error-hover);
   }
 
   /** floating */

package/__inner__/esm/components/OzenProvider/providers/theme/entities/defaultProps.d.ts

@@ -62,7 +62,7 @@ import type { RadioGroupProps as RadioGroupNextProps } from '../../../../RadioGr
 import type { RadioProps as RadioNextProps } from '../../../../RadioNext';
 import type { SectionMessageProps } from '../../../../SectionMessage';
 import type { SegmentProps } from '../../../../Segment';
-import type { SelectProps } from '../../../../Select';
+import type { SelectIconButtonProps, SelectProps } from '../../../../Select';
 import type { SliderProps } from '../../../../Slider';
 import type { SnackbarProviderProps } from '../../../../Snackbar';
 import type { StackProps } from '../../../../Stack';
@@ -186,6 +186,7 @@ export type ThemeDefaultProps = {
     SectionMessage?: Partial<SectionMessageProps>;
     Segment?: Partial<SegmentProps>;
     Select?: Partial<SelectProps>;
+    SelectIconButton?: Partial<SelectIconButtonProps>;
     Slider?: Partial<SliderProps>;
     SnackbarProvider?: Partial<SnackbarProviderProps>;
     Stack?: Partial<StackProps>;

package/__inner__/esm/components/Select/components/SelectInputRenderRight/SelectInputRenderRight.js

@@ -1,17 +1,20 @@
 import { __read } from "tslib";
-import React from 'react';
+import React, { Fragment } from 'react';
 import { classnames } from '@bem-react/classnames';
 import { ChevronDownIcon, CrossIcon } from '@ozen-ui/icons';
+import { isElement } from 'react-is';
+import { isNodeWithDisplayName } from '../../../../utils';
 import { useFieldControl } from '../../../FieldControl';
 import { FieldIcon } from '../../../FieldIcon';
 import { IconButton } from '../../../IconButtonNext';
 import { cnSelect } from '../../classNames';
+import { SELECT_ICON_BUTTON_DISPLAY_NAME } from '../../modules';
 import { useSelectContext } from '../../SelectContext';
 export var SelectInputRenderRight = function () {
     var _a = __read(useFieldControl(), 1), _b = _a[0], focused = _b.focused, hovered = _b.hovered;
     var _c = useSelectContext(), hasValue = _c.hasValue, open = _c.open, onClear = _c.onClear, renderRight = _c.renderRight, clearText = _c.clearText, renderRightLayout = _c.renderRightLayout, showClearButton = _c.showClearButton, size = _c.size;
     var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
-    var clearButton = (React.createElement(IconButton, { key: "clear", tabIndex: -1, size: size, variant: "function", icon: CrossIcon, title: clearText, "aria-label": clearText, onClick: function (event) {
+    var clearButton = (React.createElement(IconButton, { key: "clear", tabIndex: -1, size: size, variant: "function", icon: CrossIcon, color: "tertiary", title: clearText, "aria-label": clearText, onClick: function (event) {
             event.preventDefault();
             event.stopPropagation();
             onClear === null || onClear === void 0 ? void 0 : onClear(event);
@@ -22,6 +25,11 @@ export var SelectInputRenderRight = function () {
         showClearButton && !isVisibleClearButton && clearButton,
         renderRightLayout.map(function (element) {
             if (element === 'suffix') {
+                var isSelectIconButton = isElement(renderRight) &&
+                    isNodeWithDisplayName(renderRight, SELECT_ICON_BUTTON_DISPLAY_NAME);
+                if (isSelectIconButton) {
+                    return React.createElement(Fragment, { key: element }, renderRight);
+                }
                 return (React.createElement(FieldIcon, { key: element, icon: renderRight, className: classnames(cnSelect('RenderRight', { nonInteractive: true }), cnSelect('Suffix')) }));
             }
             if (element === 'clear') {

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

@@ -1,6 +1,7 @@
 export { DataListOption as Option } from '../DataList';
 export { ListItemText as OptionItemText, ListItemIcon as OptionItemIcon, } from '../List';
 export * from './entities';
+export * from './modules';
 export * from './constants';
 export * from './classNames';
 export * from './Select';

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

@@ -1,6 +1,7 @@
 export { DataListOption as Option } from '../DataList';
 export { ListItemText as OptionItemText, ListItemIcon as OptionItemIcon, } from '../List';
 export * from './entities';
+export * from './modules';
 export * from './constants';
 export * from './classNames';
 export * from './Select';

package/__inner__/esm/components/Select/modules/SelectIconButton/SelectIconButton.d.ts

@@ -0,0 +1,3 @@
+import type { SelectIconButtonBaseProps } from './types';
+export declare const cnSelectIconButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const SelectIconButton: import("../../../../utils").PolymorphicComponentWithRef<SelectIconButtonBaseProps, "button", "as">;

package/__inner__/esm/components/Select/modules/SelectIconButton/SelectIconButton.js

@@ -0,0 +1,23 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { IconButton } from '../../../IconButtonNext';
+import { cnSelect } from '../../classNames';
+import { useSelectContext } from '../../SelectContext';
+import { SELECT_ICON_BUTTON_DEFAULT_TAG, SELECT_ICON_BUTTON_DEFAULT_TAB_INDEX, SELECT_ICON_BUTTON_DISPLAY_NAME, } from './constants';
+export var cnSelectIconButton = cn('SelectIconButton');
+export var SelectIconButton = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'SelectIconButton',
+    });
+    var icon = props.icon, onClick = props.onClick, className = props.className, _a = props.as, as = _a === void 0 ? SELECT_ICON_BUTTON_DEFAULT_TAG : _a, _b = props.tabIndex, tabIndex = _b === void 0 ? SELECT_ICON_BUTTON_DEFAULT_TAB_INDEX : _b, other = __rest(props, ["icon", "onClick", "className", "as", "tabIndex"]);
+    var size = useSelectContext().size;
+    return (React.createElement(IconButton, __assign({}, other, { ref: ref, as: as, tabIndex: tabIndex, size: size, variant: "function", icon: icon, color: "tertiary", onClick: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        }, compressed: true, className: cnSelectIconButton('', [cnSelect('Suffix'), className]) })));
+});
+SelectIconButton.displayName = SELECT_ICON_BUTTON_DISPLAY_NAME;

package/__inner__/esm/components/Select/modules/SelectIconButton/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const SELECT_ICON_BUTTON_DEFAULT_TAG = "button";
+export declare const SELECT_ICON_BUTTON_DEFAULT_TAB_INDEX = -1;
+export declare const SELECT_ICON_BUTTON_DISPLAY_NAME = "SelectIconButton";

package/__inner__/esm/components/Select/modules/SelectIconButton/constants.js

@@ -0,0 +1,4 @@
+import { ICON_BUTTON_DEFAULT_TAG } from '../../../IconButtonNext';
+export var SELECT_ICON_BUTTON_DEFAULT_TAG = ICON_BUTTON_DEFAULT_TAG;
+export var SELECT_ICON_BUTTON_DEFAULT_TAB_INDEX = -1;
+export var SELECT_ICON_BUTTON_DISPLAY_NAME = 'SelectIconButton';

package/__inner__/esm/components/Select/modules/SelectIconButton/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './SelectIconButton';
+export * from './types';

package/__inner__/esm/components/Select/modules/SelectIconButton/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './SelectIconButton';
+export * from './types';

package/__inner__/esm/components/Select/modules/SelectIconButton/types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../../utils';
+import type { IconButtonBaseProps } from '../../../IconButtonNext';
+import type { SELECT_ICON_BUTTON_DEFAULT_TAG } from './constants';
+export type SelectIconButtonBaseProps = Omit<IconButtonBaseProps, 'size' | 'color' | 'variant' | 'compressed'>;
+export type SelectIconButtonProps<As extends ElementType = typeof SELECT_ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<SelectIconButtonBaseProps, As>;
+export type SelectIconButtonRef<As extends ElementType = typeof SELECT_ICON_BUTTON_DEFAULT_TAG> = ComponentRef<As>;

package/__inner__/esm/components/Select/modules/SelectIconButton/types.js

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

package/__inner__/esm/components/Select/modules/index.d.ts

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

package/__inner__/esm/components/Select/modules/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.79.0",
+  "version": "0.80.0",
   "description": "React component library",
   "files": [
     "*"
@@ -30,9 +30,9 @@
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.3",
     "framer-motion": "^12.23.12",
-    "@ozen-ui/fonts": "0.79.0",
-    "@ozen-ui/icons": "0.79.0",
-    "@ozen-ui/logger": "0.79.0"
+    "@ozen-ui/fonts": "0.80.0",
+    "@ozen-ui/icons": "0.80.0",
+    "@ozen-ui/logger": "0.80.0"
   },
   "devDependencies": {
     "@types/lodash.isequal": "^4.5.0"