@ozen-ui/kit 0.77.0 → 0.78.0

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

@@ -27,4 +27,5 @@ export type DrawerDeviceTypeProps<DeviceType extends DrawerDeviceType | undefine
     /** Тип устройства */
     deviceType?: undefined;
 });
-export type DrawerProps = DrawerDeviceTypeProps<'mobile'> | DrawerDeviceTypeProps<'desktop'> | DrawerDeviceTypeProps<undefined>;
+export type DrawerOmittedProps<OmittingKeys extends keyof DrawerBaseProps | ''> = Omit<DrawerDeviceTypeProps<'mobile'>, OmittingKeys> | Omit<DrawerDeviceTypeProps<'desktop'>, OmittingKeys> | Omit<DrawerDeviceTypeProps<undefined>, OmittingKeys>;
+export type DrawerProps = DrawerOmittedProps<''>;

package/__inner__/cjs/components/ImageBase/ImageBase.css

@@ -0,0 +1,24 @@
+.ImageBase {
+  position: relative;
+  inline-size: 100%;
+  overflow: hidden;
+}
+
+  .ImageBase-Image {
+    position: absolute;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: contain;
+    object-position: center;
+    opacity: 1;
+    transition: var(--transition-default) opacity ease-in;
+  }
+
+  .ImageBase-Loader, .ImageBase-Placeholder {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    block-size: 100%;
+  }

package/__inner__/cjs/components/ImageBase/ImageBase.d.ts

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

package/__inner__/cjs/components/ImageBase/ImageBase.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageBase = exports.cnImageBase = void 0;
+var tslib_1 = require("tslib");
+require("./ImageBase.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var logger_1 = require("@ozen-ui/logger");
+var framer_motion_1 = require("framer-motion");
+var utils_1 = require("../../utils");
+var components_1 = require("./components");
+var constants_1 = require("./constants");
+var hooks_1 = require("./hooks");
+var modules_1 = require("./modules");
+exports.cnImageBase = (0, utils_1.cn)('ImageBase');
+exports.ImageBase = (0, utils_1.polymorphicComponentWithRef)(function (_a, ref) {
+    var className = _a.className, src = _a.src, _b = _a.as, Tag = _b === void 0 ? constants_1.IMAGE_BASE_DEFAULT_ELEMENT : _b, alt = _a.alt, placeholder = _a.placeholder, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.loader, loader = _d === void 0 ? react_1.default.createElement(modules_1.ImageBaseLoader, null) : _d, style = _a.style, _e = _a.decoding, decoding = _e === void 0 ? 'async' : _e, aspectRatio = _a.aspectRatio, sources = _a.sources, pictureRef = _a.pictureRef, imgRef = _a.imgRef, other = tslib_1.__rest(_a, ["className", "src", "as", "alt", "placeholder", "loading", "loader", "style", "decoding", "aspectRatio", "sources", "pictureRef", "imgRef"]);
+    var _f = (0, hooks_1.useImageBaseStatus)(src), onLoad = _f.onLoad, onError = _f.onError, isError = _f.isError, isLoading = _f.isLoading;
+    var paddingBottom = (function () {
+        if (!aspectRatio) {
+            return undefined;
+        }
+        var _a = tslib_1.__read(aspectRatio.split('x'), 2), width = _a[0], height = _a[1];
+        if (!width || !height) {
+            logger_1.logger.error("\u041D\u0435\u0432\u0435\u0440\u043D\u043E \u043F\u0435\u0440\u0435\u0434\u0430\u043D \"aspectRatio\", \u043E\u043D \u0434\u043E\u043B\u0436\u0435\u043D \u0431\u044B\u0442\u044C \u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0435 `${number}x${number}`");
+            return undefined;
+        }
+        return "".concat((Number.parseFloat(height) / Number.parseFloat(width)) * 100, "%");
+    })();
+    var isShowPlaceholder = !!placeholder && (isError || !src);
+    var isShowLoader = isLoading && !isShowPlaceholder && !!src;
+    return (react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, role: "img", className: (0, exports.cnImageBase)('', className), style: tslib_1.__assign(tslib_1.__assign({}, style), { paddingBlockEnd: paddingBottom }) }),
+        react_1.default.createElement(framer_motion_1.AnimatePresence, null, isShowLoader && (react_1.default.createElement(framer_motion_1.motion.div, { className: (0, exports.cnImageBase)('Loader'), initial: "hidden", animate: "visible", exit: "hidden", variants: {
+                visible: { opacity: 1 },
+                hidden: { opacity: 0 },
+            } }, loader))),
+        react_1.default.createElement(framer_motion_1.AnimatePresence, null, isShowPlaceholder && (react_1.default.createElement(framer_motion_1.motion.div, { className: (0, exports.cnImageBase)('Placeholder'), initial: "hidden", animate: "visible", exit: "hidden", variants: {
+                visible: { opacity: 1 },
+                hidden: { opacity: 0 },
+            } }, placeholder))),
+        src && (react_1.default.createElement(components_1.ImageBasePicture, { ref: pictureRef, sources: sources },
+            react_1.default.createElement(framer_motion_1.motion.img, { key: src, ref: imgRef, className: (0, exports.cnImageBase)('Image'), onLoad: onLoad, onError: onError, alt: alt, src: src, decoding: decoding, loading: loading, initial: "hidden", animate: isShowLoader || isShowPlaceholder ? 'hidden' : 'visible', variants: {
+                    visible: { opacity: 1 },
+                    hidden: { opacity: 0 },
+                } })))));
+});
+exports.ImageBase.displayName = 'ImageBase';

package/__inner__/cjs/components/ImageBase/components/ImageBasePicture/ImageBasePicture.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ImageBasePictureProps } from './types';
+export declare const ImageBasePicture: React.ForwardRefExoticComponent<ImageBasePictureProps & React.RefAttributes<HTMLElement>>;

package/__inner__/cjs/components/ImageBase/components/ImageBasePicture/ImageBasePicture.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageBasePicture = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var utils_1 = require("../../../../utils");
+exports.ImageBasePicture = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, sources = _a.sources;
+    if (sources) {
+        return (react_1.default.createElement("picture", { ref: ref },
+            sources.map(function (sourceInfo) {
+                if ((0, utils_1.isString)(sourceInfo)) {
+                    return react_1.default.createElement("source", { key: sourceInfo, srcSet: sourceInfo });
+                }
+                return (react_1.default.createElement("source", { key: sourceInfo.srcSet, srcSet: sourceInfo.srcSet, type: sourceInfo.type, media: sourceInfo.media }));
+            }),
+            children));
+    }
+    return children;
+});
+exports.ImageBasePicture.displayName = 'ImageBasePicture';

package/__inner__/cjs/components/ImageBase/components/ImageBasePicture/index.d.ts

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

package/__inner__/cjs/components/ImageBase/components/ImageBasePicture/index.js

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

package/__inner__/cjs/components/ImageBase/components/ImageBasePicture/types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ImageBaseSources } from '../../entities';
+export type ImageBasePictureRef = ComponentRef<'picture'>;
+export type ImageBasePictureProps = {
+    children: ReactNode;
+    sources: ImageBaseSources | undefined;
+};

package/__inner__/cjs/components/ImageBase/components/ImageBasePicture/types.js

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

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

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

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

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

package/__inner__/cjs/components/ImageBase/constants.d.ts

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

package/__inner__/cjs/components/ImageBase/constants.js

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

package/__inner__/cjs/components/ImageBase/entities/aspectRatio.d.ts

@@ -0,0 +1 @@
+export type ImageBaseAspectRatio = `${number}x${number}`;

package/__inner__/cjs/components/ImageBase/entities/aspectRatio.js

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

package/__inner__/cjs/components/ImageBase/entities/imageRef.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRef } from 'react';
+export type ImageBaseImageRef = ComponentRef<'img'>;

package/__inner__/cjs/components/ImageBase/entities/imageRef.js

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

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

@@ -0,0 +1,3 @@
+export * from './aspectRatio';
+export * from './imageRef';
+export * from './source';

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

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

package/__inner__/cjs/components/ImageBase/entities/source.d.ts

@@ -0,0 +1,7 @@
+export type ImageBaseSourceObject = {
+    srcSet: string;
+    type?: string;
+    media?: string;
+};
+export type ImageBaseSource = string | ImageBaseSourceObject;
+export type ImageBaseSources = ImageBaseSource[];

package/__inner__/cjs/components/ImageBase/entities/source.js

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

package/__inner__/cjs/components/ImageBase/hooks/index.d.ts

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

package/__inner__/cjs/components/ImageBase/hooks/index.js

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

package/__inner__/cjs/components/ImageBase/hooks/useImageBaseStatus.d.ts

@@ -0,0 +1,7 @@
+export declare const useImageBaseStatus: (src: string) => {
+    onLoad: () => void;
+    onError: () => void;
+    isError: boolean;
+    isLoaded: boolean;
+    isLoading: boolean;
+};

package/__inner__/cjs/components/ImageBase/hooks/useImageBaseStatus.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useImageBaseStatus = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useStoredValue_1 = require("../../../hooks/useStoredValue");
+var useImageBaseStatus = function (src) {
+    var lastFinishedSrc = (0, useStoredValue_1.useStoredValue)(null);
+    var _a = tslib_1.__read((0, react_1.useState)(src ? 'loading' : 'error'), 2), status = _a[0], setStatus = _a[1];
+    var onLoad = function () {
+        setStatus('loaded');
+        lastFinishedSrc.current = src;
+    };
+    var onError = function () {
+        setStatus('error');
+        lastFinishedSrc.current = src;
+    };
+    var isError = status === 'error';
+    var isLoaded = status === 'loaded';
+    var isLoading = status === 'loading';
+    (0, react_1.useEffect)(function () {
+        var isAlreadyFinished = lastFinishedSrc.current === src;
+        if (isAlreadyFinished) {
+            return;
+        }
+        setStatus('loading');
+    }, [src]);
+    return {
+        onLoad: onLoad,
+        onError: onError,
+        isError: isError,
+        isLoaded: isLoaded,
+        isLoading: isLoading,
+    };
+};
+exports.useImageBaseStatus = useImageBaseStatus;

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

@@ -0,0 +1,5 @@
+export * from './entities';
+export * from './modules';
+export * from './constants';
+export * from './ImageBase';
+export * from './types';

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

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

package/__inner__/cjs/components/ImageBase/modules/ImageBaseLoader/ImageBaseLoader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ImageBaseLoaderProps } from './types';
+export declare const cnImageBaseLoader: import("@bem-react/classname").ClassNameFormatter;
+export declare const ImageBaseLoader: ({ className, ...other }: ImageBaseLoaderProps) => React.JSX.Element;

package/__inner__/cjs/components/ImageBase/modules/ImageBaseLoader/ImageBaseLoader.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageBaseLoader = exports.cnImageBaseLoader = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var utils_1 = require("../../../../utils");
+var Skeleton_1 = require("../../../Skeleton");
+exports.cnImageBaseLoader = (0, utils_1.cn)('ImageBaseLoader');
+var ImageBaseLoader = function (_a) {
+    var className = _a.className, other = tslib_1.__rest(_a, ["className"]);
+    return (react_1.default.createElement(Skeleton_1.Skeleton, tslib_1.__assign({ variant: "rectangular", className: (0, exports.cnImageBaseLoader)('', className), height: "100%" }, other)));
+};
+exports.ImageBaseLoader = ImageBaseLoader;

package/__inner__/cjs/components/ImageBase/modules/ImageBaseLoader/index.d.ts

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

package/__inner__/cjs/components/ImageBase/modules/ImageBaseLoader/index.js

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

package/__inner__/cjs/components/ImageBase/modules/ImageBaseLoader/types.d.ts

@@ -0,0 +1,2 @@
+import type { SkeletonRectangularProps } from '../../../Skeleton';
+export type ImageBaseLoaderProps = SkeletonRectangularProps;

package/__inner__/cjs/components/ImageBase/modules/ImageBaseLoader/types.js

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

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

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

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

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

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

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithRef, ComponentRef, ElementType, ForwardedRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../types';
+import type { PolymorphicComponentPropsWithRef } from '../../utils';
+import type { ImageBasePictureRef } from './components';
+import type { IMAGE_BASE_DEFAULT_ELEMENT } from './constants';
+import type { ImageBaseAspectRatio, ImageBaseImageRef, ImageBaseSources } from './entities';
+export type ImageBaseBaseProps = ExtendableComponentPropsWithRef<{
+    /** Путь к картинке */
+    src: string;
+    /** Компонент, который отображается при ошибке загрузки изображения */
+    placeholder?: ReactNode;
+    /** Компонент, который отображается при загрузке изображения */
+    loader?: ReactNode;
+    /** Соотношения сторон изображения */
+    aspectRatio?: ImageBaseAspectRatio | null;
+    /** HTML-sources */
+    sources?: ImageBaseSources;
+    /** Ref изображения */
+    imgRef?: ForwardedRef<ImageBaseImageRef>;
+    /** Ref picture-элемента */
+    pictureRef?: ForwardedRef<ImageBasePictureRef>;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+} & Pick<ComponentPropsWithRef<'img'>, 'alt' | 'loading' | 'decoding'>, 'div'>;
+export type ImageBaseRef<As extends ElementType = typeof IMAGE_BASE_DEFAULT_ELEMENT> = ComponentRef<As>;
+export type ImageBaseProps<As extends ElementType = typeof IMAGE_BASE_DEFAULT_ELEMENT> = PolymorphicComponentPropsWithRef<ImageBaseBaseProps, As>;

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

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

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStep.css

@@ -1,6 +1,6 @@
 .StepperVerticalStep {
   --stepper-vertical-indicator-icon-size: 24px;
-  --stepper-vertical-indicator-icon-inset-top: var(--spacing-2xs);
+  --stepper-vertical-indicator-icon-inset-top: var(--spacing-xs);
   --stepper-vertical-indicator-color-non-current: transparent;
   --stepper-vertical-indicator-color-current: transparent;
   --stepper-vertical-indicator-color: var(--stepper-vertical-indicator-color-non-current);

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

@@ -27,4 +27,5 @@ export type DrawerDeviceTypeProps<DeviceType extends DrawerDeviceType | undefine
     /** Тип устройства */
     deviceType?: undefined;
 });
-export type DrawerProps = DrawerDeviceTypeProps<'mobile'> | DrawerDeviceTypeProps<'desktop'> | DrawerDeviceTypeProps<undefined>;
+export type DrawerOmittedProps<OmittingKeys extends keyof DrawerBaseProps | ''> = Omit<DrawerDeviceTypeProps<'mobile'>, OmittingKeys> | Omit<DrawerDeviceTypeProps<'desktop'>, OmittingKeys> | Omit<DrawerDeviceTypeProps<undefined>, OmittingKeys>;
+export type DrawerProps = DrawerOmittedProps<''>;

package/__inner__/esm/components/ImageBase/ImageBase.css

@@ -0,0 +1,24 @@
+.ImageBase {
+  position: relative;
+  inline-size: 100%;
+  overflow: hidden;
+}
+
+  .ImageBase-Image {
+    position: absolute;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: contain;
+    object-position: center;
+    opacity: 1;
+    transition: var(--transition-default) opacity ease-in;
+  }
+
+  .ImageBase-Loader, .ImageBase-Placeholder {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    block-size: 100%;
+  }

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

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

package/__inner__/esm/components/ImageBase/ImageBase.js

@@ -0,0 +1,43 @@
+import { __assign, __read, __rest } from "tslib";
+import './ImageBase.css';
+import React from 'react';
+import { logger } from '@ozen-ui/logger';
+import { AnimatePresence, motion } from 'framer-motion';
+import { cn, polymorphicComponentWithRef } from '../../utils';
+import { ImageBasePicture } from './components';
+import { IMAGE_BASE_DEFAULT_ELEMENT } from './constants';
+import { useImageBaseStatus } from './hooks';
+import { ImageBaseLoader } from './modules';
+export var cnImageBase = cn('ImageBase');
+export var ImageBase = polymorphicComponentWithRef(function (_a, ref) {
+    var className = _a.className, src = _a.src, _b = _a.as, Tag = _b === void 0 ? IMAGE_BASE_DEFAULT_ELEMENT : _b, alt = _a.alt, placeholder = _a.placeholder, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.loader, loader = _d === void 0 ? React.createElement(ImageBaseLoader, null) : _d, style = _a.style, _e = _a.decoding, decoding = _e === void 0 ? 'async' : _e, aspectRatio = _a.aspectRatio, sources = _a.sources, pictureRef = _a.pictureRef, imgRef = _a.imgRef, other = __rest(_a, ["className", "src", "as", "alt", "placeholder", "loading", "loader", "style", "decoding", "aspectRatio", "sources", "pictureRef", "imgRef"]);
+    var _f = useImageBaseStatus(src), onLoad = _f.onLoad, onError = _f.onError, isError = _f.isError, isLoading = _f.isLoading;
+    var paddingBottom = (function () {
+        if (!aspectRatio) {
+            return undefined;
+        }
+        var _a = __read(aspectRatio.split('x'), 2), width = _a[0], height = _a[1];
+        if (!width || !height) {
+            logger.error("\u041D\u0435\u0432\u0435\u0440\u043D\u043E \u043F\u0435\u0440\u0435\u0434\u0430\u043D \"aspectRatio\", \u043E\u043D \u0434\u043E\u043B\u0436\u0435\u043D \u0431\u044B\u0442\u044C \u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0435 `${number}x${number}`");
+            return undefined;
+        }
+        return "".concat((Number.parseFloat(height) / Number.parseFloat(width)) * 100, "%");
+    })();
+    var isShowPlaceholder = !!placeholder && (isError || !src);
+    var isShowLoader = isLoading && !isShowPlaceholder && !!src;
+    return (React.createElement(Tag, __assign({}, other, { ref: ref, role: "img", className: cnImageBase('', className), style: __assign(__assign({}, style), { paddingBlockEnd: paddingBottom }) }),
+        React.createElement(AnimatePresence, null, isShowLoader && (React.createElement(motion.div, { className: cnImageBase('Loader'), initial: "hidden", animate: "visible", exit: "hidden", variants: {
+                visible: { opacity: 1 },
+                hidden: { opacity: 0 },
+            } }, loader))),
+        React.createElement(AnimatePresence, null, isShowPlaceholder && (React.createElement(motion.div, { className: cnImageBase('Placeholder'), initial: "hidden", animate: "visible", exit: "hidden", variants: {
+                visible: { opacity: 1 },
+                hidden: { opacity: 0 },
+            } }, placeholder))),
+        src && (React.createElement(ImageBasePicture, { ref: pictureRef, sources: sources },
+            React.createElement(motion.img, { key: src, ref: imgRef, className: cnImageBase('Image'), onLoad: onLoad, onError: onError, alt: alt, src: src, decoding: decoding, loading: loading, initial: "hidden", animate: isShowLoader || isShowPlaceholder ? 'hidden' : 'visible', variants: {
+                    visible: { opacity: 1 },
+                    hidden: { opacity: 0 },
+                } })))));
+});
+ImageBase.displayName = 'ImageBase';

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/ImageBasePicture.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ImageBasePictureProps } from './types';
+export declare const ImageBasePicture: React.ForwardRefExoticComponent<ImageBasePictureProps & React.RefAttributes<HTMLElement>>;

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/ImageBasePicture.js

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import { isString } from '../../../../utils';
+export var ImageBasePicture = forwardRef(function (_a, ref) {
+    var children = _a.children, sources = _a.sources;
+    if (sources) {
+        return (React.createElement("picture", { ref: ref },
+            sources.map(function (sourceInfo) {
+                if (isString(sourceInfo)) {
+                    return React.createElement("source", { key: sourceInfo, srcSet: sourceInfo });
+                }
+                return (React.createElement("source", { key: sourceInfo.srcSet, srcSet: sourceInfo.srcSet, type: sourceInfo.type, media: sourceInfo.media }));
+            }),
+            children));
+    }
+    return children;
+});
+ImageBasePicture.displayName = 'ImageBasePicture';

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/index.d.ts

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

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/index.js

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

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ImageBaseSources } from '../../entities';
+export type ImageBasePictureRef = ComponentRef<'picture'>;
+export type ImageBasePictureProps = {
+    children: ReactNode;
+    sources: ImageBaseSources | undefined;
+};

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/types.js

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

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

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

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

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

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

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

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

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

package/__inner__/esm/components/ImageBase/entities/aspectRatio.d.ts

@@ -0,0 +1 @@
+export type ImageBaseAspectRatio = `${number}x${number}`;

package/__inner__/esm/components/ImageBase/entities/aspectRatio.js

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

package/__inner__/esm/components/ImageBase/entities/imageRef.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRef } from 'react';
+export type ImageBaseImageRef = ComponentRef<'img'>;

package/__inner__/esm/components/ImageBase/entities/imageRef.js

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

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

@@ -0,0 +1,3 @@
+export * from './aspectRatio';
+export * from './imageRef';
+export * from './source';

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

@@ -0,0 +1,3 @@
+export * from './aspectRatio';
+export * from './imageRef';
+export * from './source';

package/__inner__/esm/components/ImageBase/entities/source.d.ts

@@ -0,0 +1,7 @@
+export type ImageBaseSourceObject = {
+    srcSet: string;
+    type?: string;
+    media?: string;
+};
+export type ImageBaseSource = string | ImageBaseSourceObject;
+export type ImageBaseSources = ImageBaseSource[];

package/__inner__/esm/components/ImageBase/entities/source.js

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

package/__inner__/esm/components/ImageBase/hooks/index.d.ts

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

package/__inner__/esm/components/ImageBase/hooks/index.js

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

package/__inner__/esm/components/ImageBase/hooks/useImageBaseStatus.d.ts

@@ -0,0 +1,7 @@
+export declare const useImageBaseStatus: (src: string) => {
+    onLoad: () => void;
+    onError: () => void;
+    isError: boolean;
+    isLoaded: boolean;
+    isLoading: boolean;
+};

package/__inner__/esm/components/ImageBase/hooks/useImageBaseStatus.js

@@ -0,0 +1,32 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+import { useStoredValue } from '../../../hooks/useStoredValue';
+export var useImageBaseStatus = function (src) {
+    var lastFinishedSrc = useStoredValue(null);
+    var _a = __read(useState(src ? 'loading' : 'error'), 2), status = _a[0], setStatus = _a[1];
+    var onLoad = function () {
+        setStatus('loaded');
+        lastFinishedSrc.current = src;
+    };
+    var onError = function () {
+        setStatus('error');
+        lastFinishedSrc.current = src;
+    };
+    var isError = status === 'error';
+    var isLoaded = status === 'loaded';
+    var isLoading = status === 'loading';
+    useEffect(function () {
+        var isAlreadyFinished = lastFinishedSrc.current === src;
+        if (isAlreadyFinished) {
+            return;
+        }
+        setStatus('loading');
+    }, [src]);
+    return {
+        onLoad: onLoad,
+        onError: onError,
+        isError: isError,
+        isLoaded: isLoaded,
+        isLoading: isLoading,
+    };
+};

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

@@ -0,0 +1,5 @@
+export * from './entities';
+export * from './modules';
+export * from './constants';
+export * from './ImageBase';
+export * from './types';

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

@@ -0,0 +1,5 @@
+export * from './entities';
+export * from './modules';
+export * from './constants';
+export * from './ImageBase';
+export * from './types';

package/__inner__/esm/components/ImageBase/modules/ImageBaseLoader/ImageBaseLoader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ImageBaseLoaderProps } from './types';
+export declare const cnImageBaseLoader: import("@bem-react/classname").ClassNameFormatter;
+export declare const ImageBaseLoader: ({ className, ...other }: ImageBaseLoaderProps) => React.JSX.Element;

package/__inner__/esm/components/ImageBase/modules/ImageBaseLoader/ImageBaseLoader.js

@@ -0,0 +1,9 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { cn } from '../../../../utils';
+import { Skeleton } from '../../../Skeleton';
+export var cnImageBaseLoader = cn('ImageBaseLoader');
+export var ImageBaseLoader = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    return (React.createElement(Skeleton, __assign({ variant: "rectangular", className: cnImageBaseLoader('', className), height: "100%" }, other)));
+};

package/__inner__/esm/components/ImageBase/modules/ImageBaseLoader/index.d.ts

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

package/__inner__/esm/components/ImageBase/modules/ImageBaseLoader/index.js

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

package/__inner__/esm/components/ImageBase/modules/ImageBaseLoader/types.d.ts

@@ -0,0 +1,2 @@
+import type { SkeletonRectangularProps } from '../../../Skeleton';
+export type ImageBaseLoaderProps = SkeletonRectangularProps;

package/__inner__/esm/components/ImageBase/modules/ImageBaseLoader/types.js

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

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

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

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

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

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

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithRef, ComponentRef, ElementType, ForwardedRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '../../types';
+import type { PolymorphicComponentPropsWithRef } from '../../utils';
+import type { ImageBasePictureRef } from './components';
+import type { IMAGE_BASE_DEFAULT_ELEMENT } from './constants';
+import type { ImageBaseAspectRatio, ImageBaseImageRef, ImageBaseSources } from './entities';
+export type ImageBaseBaseProps = ExtendableComponentPropsWithRef<{
+    /** Путь к картинке */
+    src: string;
+    /** Компонент, который отображается при ошибке загрузки изображения */
+    placeholder?: ReactNode;
+    /** Компонент, который отображается при загрузке изображения */
+    loader?: ReactNode;
+    /** Соотношения сторон изображения */
+    aspectRatio?: ImageBaseAspectRatio | null;
+    /** HTML-sources */
+    sources?: ImageBaseSources;
+    /** Ref изображения */
+    imgRef?: ForwardedRef<ImageBaseImageRef>;
+    /** Ref picture-элемента */
+    pictureRef?: ForwardedRef<ImageBasePictureRef>;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+} & Pick<ComponentPropsWithRef<'img'>, 'alt' | 'loading' | 'decoding'>, 'div'>;
+export type ImageBaseRef<As extends ElementType = typeof IMAGE_BASE_DEFAULT_ELEMENT> = ComponentRef<As>;
+export type ImageBaseProps<As extends ElementType = typeof IMAGE_BASE_DEFAULT_ELEMENT> = PolymorphicComponentPropsWithRef<ImageBaseBaseProps, As>;

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

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStep.css

@@ -1,6 +1,6 @@
 .StepperVerticalStep {
   --stepper-vertical-indicator-icon-size: 24px;
-  --stepper-vertical-indicator-icon-inset-top: var(--spacing-2xs);
+  --stepper-vertical-indicator-icon-inset-top: var(--spacing-xs);
   --stepper-vertical-indicator-color-non-current: transparent;
   --stepper-vertical-indicator-color-current: transparent;
   --stepper-vertical-indicator-color: var(--stepper-vertical-indicator-color-non-current);

package/package.json

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