@ozen-ui/kit 0.66.0 → 0.67.0

package/__inner__/esm/components/Title/components/variant/secondary/TitleSecondary.js

@@ -6,7 +6,7 @@ import { polymorphicComponentWithRef } from '../../../../../utils/polymorphicCom
 import { TITLE_DEFAULT_TAG } from '../../../constants';
 export var cnTitleSecondary = cn('TitleSecondary');
 export var TitleSecondary = polymorphicComponentWithRef(function (_a, ref) {
-    var size = _a.size, className = _a.className, _b = _a.as, Tag = _b === void 0 ? TITLE_DEFAULT_TAG : _b, children = _a.children, defaultMargin = _a.defaultMargin, other = __rest(_a, ["size", "className", "as", "children", "defaultMargin"]);
-    return (React.createElement(Tag, __assign({ className: cnTitleSecondary({ size: size, defaultMargin: defaultMargin }, [className]) }, other, { ref: ref }), children));
+    var size = _a.size, className = _a.className, _b = _a.as, Tag = _b === void 0 ? TITLE_DEFAULT_TAG : _b, children = _a.children, other = __rest(_a, ["size", "className", "as", "children"]);
+    return (React.createElement(Tag, __assign({ className: cnTitleSecondary({ size: size }, [className]) }, other, { ref: ref }), children));
 });
 TitleSecondary.displayName = 'TitleSecondary';

package/__inner__/esm/components/Title/components/variant/secondary/types.d.ts

@@ -5,8 +5,6 @@ import type { TitleSizeVariant } from '../../../entities';
 export type TitleSecondaryBaseProps = {
     /** Свойство, регулирующее размер слайдера */
     size: TitleSizeVariant;
-    /** Если `true` добавляет отступы */
-    defaultMargin?: boolean;
     /** data-атрибут для тестирования */
     'data-testid'?: string;
 };

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/TitleBreadcrumbItem.d.ts

@@ -0,0 +1 @@
+export declare const TitleBreadcrumbItem: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<import("../../../Breadcrumbs").BreadcrumbItemBaseProps, "a">;

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/TitleBreadcrumbItem.js

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

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/constants.d.ts

@@ -0,0 +1 @@
+export declare const TITLE_BREADCRUMB_ITEM_DEFAULT_TAG = "a";

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/constants.js

@@ -0,0 +1 @@
+export var TITLE_BREADCRUMB_ITEM_DEFAULT_TAG = 'a';

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/index.d.ts

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

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/index.js

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

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/types.d.ts

@@ -0,0 +1,6 @@
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../../utils/polymorphicComponentWithRef';
+import type { BreadcrumbItemBaseProps } from '../../../Breadcrumbs';
+import type { TITLE_BREADCRUMB_ITEM_DEFAULT_TAG } from './constants';
+export type TitleBreadcrumbItemBaseProps = BreadcrumbItemBaseProps;
+export type TitleBreadcrumbItemProps<As extends ElementType = typeof TITLE_BREADCRUMB_ITEM_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<TitleBreadcrumbItemBaseProps, As>;

package/__inner__/esm/components/Title/modules/TitleBreadcrumbItem/types.js

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

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/TitleBreadcrumbs.d.ts

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

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/TitleBreadcrumbs.js

@@ -0,0 +1,12 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { Breadcrumbs } from '../../../Breadcrumbs';
+import { useTitleContext } from '../../TitleContext';
+import { TITLE_BREADCRUMBS_SIZE_MAP } from './constants';
+export var TitleBreadcrumbs = forwardRef(function (_a, ref) {
+    var children = _a.children, other = __rest(_a, ["children"]);
+    var size = useTitleContext().size;
+    var breadcrumbsSize = TITLE_BREADCRUMBS_SIZE_MAP[size];
+    return (React.createElement(Breadcrumbs, __assign({ ref: ref, size: breadcrumbsSize }, other), children));
+});
+TitleBreadcrumbs.displayName = 'TitleBreadcrumbs';

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/constants.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbsSizeVariant } from '../../../Breadcrumbs';
+import type { TitleSizeVariant } from '../../entities';
+export declare const TITLE_BREADCRUMBS_SIZE_MAP: Readonly<Record<TitleSizeVariant, BreadcrumbsSizeVariant>>;

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/constants.js

@@ -0,0 +1,4 @@
+export var TITLE_BREADCRUMBS_SIZE_MAP = {
+    s: 'xs',
+    m: 's',
+};

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/index.d.ts

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

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/index.js

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

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/types.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbsProps, BreadcrumbsRef } from '../../../Breadcrumbs';
+export type TitleBreadcrumbsRef = BreadcrumbsRef;
+export type TitleBreadcrumbsProps = Omit<BreadcrumbsProps, 'size'>;

package/__inner__/esm/components/Title/modules/TitleBreadcrumbs/types.js

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

package/__inner__/esm/components/Title/modules/{icon-button → TitleIconButton}/index.d.ts

@@ -1,2 +1,3 @@
+export * from './presets';
 export * from './TitleIconButton';
 export * from './types';

package/__inner__/esm/components/Title/modules/{icon-button → TitleIconButton}/index.js

@@ -1,2 +1,3 @@
+export * from './presets';
 export * from './TitleIconButton';
 export * from './types';

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/TitleBackIconButton.d.ts

@@ -0,0 +1,2 @@
+import type { TitleBackIconButtonBaseProps } from './types';
+export declare const TitleBackIconButton: import("../../../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TitleBackIconButtonBaseProps, "button">;

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/TitleBackIconButton.js

@@ -0,0 +1,11 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { ArrowLeftIcon } from '@ozen-ui/icons';
+import { polymorphicComponentWithRef } from '../../../../../../utils/polymorphicComponentWithRef';
+import { TitleIconButton } from '../../TitleIconButton';
+import { TITLE_BACK_ICON_BUTTON_DEFAULT_TAG } from './constants';
+export var TitleBackIconButton = polymorphicComponentWithRef(function (_a, ref) {
+    var _b = _a.as, as = _b === void 0 ? TITLE_BACK_ICON_BUTTON_DEFAULT_TAG : _b, other = __rest(_a, ["as"]);
+    return (React.createElement(TitleIconButton, __assign({}, other, { ref: ref, as: as, icon: React.createElement(ArrowLeftIcon, null) })));
+});
+TitleBackIconButton.displayName = 'TitleBackIconButton';

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/constants.d.ts

@@ -0,0 +1 @@
+export declare const TITLE_BACK_ICON_BUTTON_DEFAULT_TAG = "button";

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/constants.js

@@ -0,0 +1 @@
+export var TITLE_BACK_ICON_BUTTON_DEFAULT_TAG = 'button';

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/index.d.ts

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

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/index.js

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

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/types.d.ts

@@ -0,0 +1,6 @@
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../../../../utils/polymorphicComponentWithRef';
+import type { TitleIconButtonBaseProps } from '../../types';
+import type { TITLE_BACK_ICON_BUTTON_DEFAULT_TAG } from './constants';
+export type TitleBackIconButtonBaseProps = Omit<TitleIconButtonBaseProps, 'icon'>;
+export type TitleBackIconButtonProps<As extends ElementType = typeof TITLE_BACK_ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<TitleBackIconButtonBaseProps, As>;

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/TitleBackIconButton/types.js

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

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/index.d.ts

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

package/__inner__/esm/components/Title/modules/TitleIconButton/presets/index.js

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

package/__inner__/esm/components/Title/modules/TitleIconButton/types.js

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

package/__inner__/esm/components/Title/modules/{tag → TitleTag}/TitleTag.d.ts

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

package/__inner__/esm/components/Title/modules/{tag → TitleTag}/TitleTag.js

@@ -3,6 +3,6 @@ import React from 'react';
 import { cn } from '../../../../utils/classname';
 import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
 import { Tag } from '../../../TagNext';
-import { TITLE_TAG_DEFAULT_TAG } from '../../../Title/modules/tag/constants';
+import { TITLE_TAG_DEFAULT_TAG } from './constants';
 export var cnTitleTag = cn('TitleTag');
 export var TitleTag = polymorphicComponentWithRef(function (props, ref) { return (React.createElement(Tag, __assign({ as: TITLE_TAG_DEFAULT_TAG }, props, { ref: ref, size: "xs", variant: "primary", color: "uncolored", className: cnTitleTag('', [props.className]) }))); });

package/__inner__/esm/components/Title/modules/TitleTag/types.js

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

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

@@ -1,2 +1,4 @@
-export * from './icon-button';
-export * from './tag';
+export * from './TitleBreadcrumbItem';
+export * from './TitleBreadcrumbs';
+export * from './TitleIconButton';
+export * from './TitleTag';

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

@@ -1,2 +1,4 @@
-export * from './icon-button';
-export * from './tag';
+export * from './TitleBreadcrumbItem';
+export * from './TitleBreadcrumbs';
+export * from './TitleIconButton';
+export * from './TitleTag';

package/__inner__/esm/hooks/useCreateResizeObserver/index.d.ts

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

package/__inner__/esm/hooks/useCreateResizeObserver/index.js

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

package/__inner__/esm/hooks/useCreateResizeObserver/types.d.ts

@@ -0,0 +1 @@
+export type UseCreateResizeObserverOnChange = (entries: ResizeObserverEntry[]) => void;

package/__inner__/esm/hooks/useCreateResizeObserver/types.js

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

package/__inner__/esm/hooks/useCreateResizeObserver/useCreateResizeObserver.d.ts

@@ -0,0 +1,2 @@
+import type { UseCreateResizeObserverOnChange } from './types';
+export declare function useCreateResizeObserver(onChange?: UseCreateResizeObserverOnChange): ResizeObserver | null;

package/__inner__/esm/hooks/useCreateResizeObserver/useCreateResizeObserver.js

@@ -0,0 +1,25 @@
+import { useEffect, useMemo } from 'react';
+import { useStoredValue } from '../useStoredValue';
+export function useCreateResizeObserver(onChange) {
+    var frameID = useStoredValue(0);
+    var onChangeStored = useStoredValue(function () { return onChange; });
+    onChangeStored.current = onChange;
+    var observer = useMemo(function () {
+        return typeof window !== 'undefined' && typeof ResizeObserver !== 'undefined'
+            ? new ResizeObserver(function (entries) {
+                cancelAnimationFrame(frameID.current);
+                frameID.current = requestAnimationFrame(function () {
+                    var _a;
+                    (_a = onChangeStored.current) === null || _a === void 0 ? void 0 : _a.call(onChangeStored, entries);
+                });
+            })
+            : null;
+    }, []);
+    useEffect(function () { return function () {
+        observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        if (frameID.current) {
+            cancelAnimationFrame(frameID.current);
+        }
+    }; }, []);
+    return observer;
+}

package/__inner__/esm/hooks/useMultipleResizeObserver/index.d.ts

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

package/__inner__/esm/hooks/useMultipleResizeObserver/index.js

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

package/__inner__/esm/hooks/useMultipleResizeObserver/types.d.ts

@@ -0,0 +1,7 @@
+export type UseMultipleResizeObserverElements = (HTMLElement | null)[];
+/**
+ * @param isForce - При переданном `true` будет делать переподключение,
+ * даже если все переданные компоненты уже подключены
+ */
+export type UseMultipleResizeObserverReconnect = (isForce?: boolean) => void;
+export type UseMultipleResizeObserverOnChange = (entries: ResizeObserverEntry[]) => void;

package/__inner__/esm/hooks/useMultipleResizeObserver/types.js

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

package/__inner__/esm/hooks/useMultipleResizeObserver/useMultipleResizeObserver.d.ts

@@ -0,0 +1,4 @@
+import type { UseMultipleResizeObserverElements, UseMultipleResizeObserverOnChange, UseMultipleResizeObserverReconnect } from './types';
+export declare function useMultipleResizeObserver(elements: UseMultipleResizeObserverElements | (() => UseMultipleResizeObserverElements), onChange?: UseMultipleResizeObserverOnChange, options?: ResizeObserverOptions): {
+    reconnect: UseMultipleResizeObserverReconnect;
+};

package/__inner__/esm/hooks/useMultipleResizeObserver/useMultipleResizeObserver.js

@@ -0,0 +1,45 @@
+import { __read, __spreadArray } from "tslib";
+import { useEffect } from 'react';
+import { isFunction } from '../../utils/isFunction';
+import { useCreateResizeObserver } from '../useCreateResizeObserver';
+import { useStoredValue } from '../useStoredValue';
+export function useMultipleResizeObserver(elements, onChange, options) {
+    var observer = useCreateResizeObserver(function (entries) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(entries);
+    });
+    var getElements = function () { return (isFunction(elements) ? elements() : elements); };
+    var previousConnectedElements = useStoredValue(function () { return __spreadArray([], __read(getElements()), false); });
+    var reconnect = function (isForce) {
+        if (isForce === void 0) { isForce = false; }
+        var newElements = getElements();
+        var hasChangesInElements = (function () {
+            if (isForce) {
+                return true;
+            }
+            if (previousConnectedElements.current.length !== newElements.length) {
+                return true;
+            }
+            var hasDifferenceInElements = newElements.some(function (element) {
+                return !previousConnectedElements.current.find(function (previousElementsElement) { return previousElementsElement === element; });
+            });
+            return hasDifferenceInElements;
+        })();
+        if (!hasChangesInElements) {
+            return;
+        }
+        previousConnectedElements.current = newElements;
+        observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        newElements === null || newElements === void 0 ? void 0 : newElements.forEach(function (element) {
+            if (!element) {
+                return;
+            }
+            observer === null || observer === void 0 ? void 0 : observer.observe(element, options);
+        });
+    };
+    useEffect(function () {
+        reconnect();
+    }, [elements]);
+    return {
+        reconnect: reconnect,
+    };
+}

package/__inner__/esm/hooks/useResizeObserver/constants.d.ts

@@ -0,0 +1,2 @@
+import type { UseResizeObserverRect } from './types';
+export declare const USE_RESIZE_OBSERVER_DEFAULT_STATE: Readonly<UseResizeObserverRect>;

package/__inner__/esm/hooks/useResizeObserver/constants.js

@@ -0,0 +1,10 @@
+export var USE_RESIZE_OBSERVER_DEFAULT_STATE = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+};

package/__inner__/esm/hooks/useResizeObserver/types.d.ts

@@ -0,0 +1 @@
+export type UseResizeObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;

package/__inner__/esm/hooks/useResizeObserver/types.js

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

package/__inner__/esm/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -1,3 +1,2 @@
-type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;
-export declare function useResizeObserver<T extends HTMLElement = any>(options?: ResizeObserverOptions): readonly [import("react").RefObject<T>, ObserverRect];
-export {};
+import type { UseResizeObserverRect } from './types';
+export declare function useResizeObserver<T extends HTMLElement = any>(options?: ResizeObserverOptions): readonly [import("react").RefObject<T>, UseResizeObserverRect];

package/__inner__/esm/hooks/useResizeObserver/useResizeObserver.js

@@ -1,45 +1,24 @@
 import { __read } from "tslib";
-import { useEffect, useMemo, useRef, useState } from 'react';
-var defaultState = {
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-};
+import { useEffect, useRef, useState } from 'react';
+import { useCreateResizeObserver } from '../useCreateResizeObserver';
+import { USE_RESIZE_OBSERVER_DEFAULT_STATE } from './constants';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useResizeObserver(options) {
-    var frameID = useRef(0);
     var ref = useRef(null);
-    var _a = __read(useState(defaultState), 2), rect = _a[0], setRect = _a[1];
-    var observer = useMemo(function () {
-        return typeof window !== 'undefined' && typeof ResizeObserver !== 'undefined'
-            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                new ResizeObserver(function (entries) {
-                    var entry = entries[0];
-                    if (entry) {
-                        cancelAnimationFrame(frameID.current);
-                        frameID.current = requestAnimationFrame(function () {
-                            if (ref.current) {
-                                setRect(entry.contentRect);
-                            }
-                        });
-                    }
-                })
-            : null;
-    }, []);
+    var _a = __read(useState(USE_RESIZE_OBSERVER_DEFAULT_STATE), 2), rect = _a[0], setRect = _a[1];
+    var observer = useCreateResizeObserver(function (entries) {
+        var entry = entries[0];
+        if (entry && ref.current) {
+            var newRect = entry.contentRect;
+            setRect(newRect);
+        }
+    });
     useEffect(function () {
         if (ref.current) {
             observer === null || observer === void 0 ? void 0 : observer.observe(ref.current, options);
         }
         return function () {
             observer === null || observer === void 0 ? void 0 : observer.disconnect();
-            if (frameID.current) {
-                cancelAnimationFrame(frameID.current);
-            }
         };
     }, [ref.current]);
     return [ref, rect];

package/__inner__/esm/types/css/index.d.ts

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

package/__inner__/esm/types/css/index.js

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

package/__inner__/esm/types/css/variable.d.ts

@@ -0,0 +1,4 @@
+export type CSSVariableValue = string | number | null;
+export type CSSVariablePriority = 'important' | '' | undefined;
+export type CSSVariablesObject = Record<string, CSSVariableValue>;
+export type CSSVariablesObjectKey<Variables extends CSSVariablesObject> = string & keyof Variables;

package/__inner__/esm/types/css/variable.js

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

package/__inner__/esm/utils/animateProperty.d.ts

@@ -8,7 +8,10 @@ export type TimingFunction = keyof typeof timingFunctions;
 export interface AnimatePropertyOptions {
     timingFunction?: TimingFunction;
     duration?: number;
+    onFinish?: () => void;
 }
+/** Анимирует число, вызывая onAnimate при каждом кадре анимации */
+export declare const animateNumberValue: (onAnimate: (value: number, previousValue: number) => void, from: number | undefined, to: number, options?: AnimatePropertyOptions) => () => void;
 /** Анимирует числовое свойство элемента */
 export declare const animateProperty: (property: "scrollLeft", element: HTMLElement | null, to: number, options?: AnimatePropertyOptions) => (() => void);
 export {};

package/__inner__/esm/utils/animateProperty.js

@@ -4,18 +4,20 @@ var timingFunctions = {
     'ease-out': function (time) { return 1 - Math.pow((1 - time), 1.675); },
     'ease-in-out': function (time) { return 0.5 * (Math.sin((time - 0.5) * Math.PI) + 1); },
 };
-/** Анимирует числовое свойство элемента */
-export var animateProperty = function (property, element, to, options) {
+/** Анимирует число, вызывая onAnimate при каждом кадре анимации */
+export var animateNumberValue = function (onAnimate, from, to, options) {
     if (options === void 0) { options = {}; }
-    var from = element === null || element === void 0 ? void 0 : element[property];
-    var _a = options.timingFunction, timingFunction = _a === void 0 ? 'ease-in-out' : _a, _b = options.duration, duration = _b === void 0 ? 300 : _b;
+    var _a = options.timingFunction, timingFunction = _a === void 0 ? 'ease-in-out' : _a, _b = options.duration, duration = _b === void 0 ? 300 : _b, onFinish = options.onFinish;
     var cancelled = false;
     var start = null;
     var cancel = function () {
         cancelled = true;
     };
-    if (!element || (!from && from !== 0))
+    if (!from && from !== 0) {
+        onFinish === null || onFinish === void 0 ? void 0 : onFinish();
         return cancel;
+    }
+    var previousValue = from;
     var step = function (timestamp) {
         if (cancelled)
             return;
@@ -24,14 +26,31 @@ export var animateProperty = function (property, element, to, options) {
         }
         var time = Math.min(1, (timestamp - start) / duration);
         var selectedTimingFunction = timingFunctions[timingFunction];
-        // eslint-disable-next-line no-param-reassign
-        element[property] = selectedTimingFunction(time) * (to - from) + from;
-        if (time >= 1)
+        var newValue = selectedTimingFunction(time) * (to - from) + from;
+        onAnimate(newValue, previousValue);
+        previousValue = newValue;
+        if (time >= 1) {
+            onFinish === null || onFinish === void 0 ? void 0 : onFinish();
             return;
+        }
         requestAnimationFrame(step);
     };
-    if (from === to)
+    if (from === to) {
+        onFinish === null || onFinish === void 0 ? void 0 : onFinish();
         return cancel;
+    }
     requestAnimationFrame(step);
     return cancel;
 };
+/** Анимирует числовое свойство элемента */
+export var animateProperty = function (property, element, to, options) {
+    if (options === void 0) { options = {}; }
+    var from = element === null || element === void 0 ? void 0 : element[property];
+    return animateNumberValue(function (value) {
+        if (!element) {
+            return;
+        }
+        // eslint-disable-next-line no-param-reassign
+        element[property] = value;
+    }, from, to, options);
+};

package/__inner__/esm/utils/array/{create-empty → createEmpty}/createEmptyArray.js

@@ -1,4 +1,4 @@
-import { createFilledArray } from '../create-filled';
+import { createFilledArray } from '../createFilled';
 export var createEmptyArray = function (length) {
     return createFilledArray(length, null);
 };

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

@@ -1,2 +1,3 @@
-export * from './create-empty';
-export * from './create-filled';
+export * from './createEmpty';
+export * from './createFilled';
+export * from './isArray';

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

@@ -1,2 +1,3 @@
-export * from './create-empty';
-export * from './create-filled';
+export * from './createEmpty';
+export * from './createFilled';
+export * from './isArray';

package/__inner__/esm/utils/array/isArray/index.d.ts

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

package/__inner__/esm/utils/array/isArray/index.js

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

package/__inner__/esm/utils/array/isArray/isArray.d.ts

@@ -0,0 +1 @@
+export declare const isArray: (value: any) => value is any[];

package/__inner__/esm/utils/array/isArray/isArray.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export var isArray = function (value) { return Array.isArray(value); };

package/__inner__/esm/utils/css/{generate-variable-name → generateCSSVariableName}/generateCSSVariableName.js

@@ -1,4 +1,4 @@
-import { isCSSVariableName } from '../is-variable-name';
+import { isCSSVariableName } from '../isCSSVariableName';
 export var generateCSSVariableName = function (variable) {
     if (isCSSVariableName(variable)) {
         return variable;

package/__inner__/esm/utils/css/{generate-variables → generateCSSVariables}/generateCSSVariables.js

@@ -1,5 +1,5 @@
 import { __read } from "tslib";
-import { generateCSSVariableName } from '../generate-variable-name';
+import { generateCSSVariableName } from '../generateCSSVariableName';
 export var generateCSSVariables = function (variables) {
     var formattedVariables = {};
     Object.entries(variables).forEach(function (_a) {

package/__inner__/esm/utils/css/index.d.ts

@@ -1,3 +1,4 @@
-export * from './generate-variable-name';
-export * from './generate-variables';
-export * from './is-variable-name';
+export * from './generateCSSVariableName';
+export * from './generateCSSVariables';
+export * from './isCSSVariableName';
+export * from './setCSSProperty';

package/__inner__/esm/utils/css/index.js

@@ -1,3 +1,4 @@
-export * from './generate-variable-name';
-export * from './generate-variables';
-export * from './is-variable-name';
+export * from './generateCSSVariableName';
+export * from './generateCSSVariables';
+export * from './isCSSVariableName';
+export * from './setCSSProperty';

package/__inner__/esm/utils/css/setCSSProperty/index.d.ts

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

package/__inner__/esm/utils/css/setCSSProperty/index.js

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

package/__inner__/esm/utils/css/setCSSProperty/setCSSProperty.d.ts

@@ -0,0 +1,3 @@
+import type { CSSVariablesObject, CSSVariablesObjectKey } from '../../../types/css';
+import type { SetCSSPropertyArguments } from './types';
+export declare const setCSSProperty: <Variables extends CSSVariablesObject, VariableName extends CSSVariablesObjectKey<Variables>>({ element, variableName, value, priority, }: SetCSSPropertyArguments<Variables, VariableName>) => void;

package/__inner__/esm/utils/css/setCSSProperty/setCSSProperty.js

@@ -0,0 +1,9 @@
+import { isNumber } from '../../number';
+import { generateCSSVariableName } from '../generateCSSVariableName';
+export var setCSSProperty = function (_a) {
+    var element = _a.element, variableName = _a.variableName, value = _a.value, priority = _a.priority;
+    if (!element) {
+        return;
+    }
+    element.style.setProperty(generateCSSVariableName(variableName), isNumber(value) ? value.toString() : value, priority);
+};