@astral/ui 4.85.0 → 4.87.0

package/components/NotificationList/ListItem/useLogic/useLogic.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { useIntersection } from 'react-use';
+import { useIntersection } from '../../../useIntersection';
 export const useLogic = ({ id, onDelete, onViewNotification, isUnread, }) => {
     const ref = useRef(null);
     const entry = useIntersection(ref, {

package/components/PageHeader/HeaderContent/HeaderContent.d.ts

@@ -1,5 +1,5 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
-type HeaderContentProps<TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType> = Pick<PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>, 'breadcrumbs' | 'backButton' | 'description' | 'actions' | 'subheader' | 'filters' | 'title' | 'isLoading'>;
-export declare const HeaderContent: <TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType>({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }: HeaderContentProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => import("react/jsx-runtime").JSX.Element;
+type HeaderContentProps<TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType> = Pick<PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>, 'breadcrumbs' | 'backButton' | 'description' | 'actions' | 'subheader' | 'tabs' | 'filters' | 'title' | 'isLoading'>;
+export declare const HeaderContent: <TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType, TBackButtonComponent extends ElementType>({ backButton, description, subheader, breadcrumbs, tabs, actions, title, filters, isLoading, }: HeaderContentProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/PageHeader/HeaderContent/HeaderContent.js

@@ -6,13 +6,13 @@ import { PageActions } from '../PageActions';
 import { Title } from '../Title';
 import { Description } from './Description';
 import { FormFiltersProvider } from './FormFiltersProvider';
-import { BreadcrumbsWrapper, DesktopTitleWrapper, PageSubheader, } from './styles';
-export const HeaderContent = ({ backButton, description, subheader, breadcrumbs, actions, title, filters, isLoading, }) => {
+import { BreadcrumbsWrapper, DesktopTitleWrapper, PageSubheader, TabsWrapper, } from './styles';
+export const HeaderContent = ({ backButton, description, subheader, breadcrumbs, tabs, actions, title, filters, isLoading, }) => {
     const renderBreadcrumbs = () => {
         if (!breadcrumbs) {
             return null;
         }
         return (_jsx(BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? (_jsx(Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), subheader && (_jsx(PageSubheader, { className: pageHeaderClassnames.subheader, children: subheader }))] }));
+    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", withCollapseOnLaptop: Boolean(filters), ...actions })), filters && (_jsx(FormFiltersProvider, { filtersClassName: pageHeaderClassnames.filters, quickFiltersClassName: pageHeaderClassnames.quickFilters, children: filters })), tabs && _jsx(TabsWrapper, { children: tabs }), subheader && (_jsx(PageSubheader, { className: pageHeaderClassnames.subheader, children: subheader }))] }));
 };

package/components/PageHeader/HeaderContent/styles.d.ts

@@ -3,6 +3,10 @@ export declare const BreadcrumbsWrapper: import("../../styled").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TabsWrapper: import("../../styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const PageSubheader: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/PageHeader/HeaderContent/styles.js

@@ -9,9 +9,19 @@ export const BreadcrumbsWrapper = styled.div `
     display: none;
   }
 `;
+export const TabsWrapper = styled.div `
+  grid-column: 1 / -1;
+  grid-row: 4;
+
+  padding-top:  ${({ theme }) => theme.spacing(3)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(0, 3, 3, 3)};
+  }
+`;
 export const PageSubheader = styled.div `
   grid-column: 1 / -1;
-  grid-row: 6;
+  grid-row: 5;
 
   padding-top: ${({ theme }) => theme.spacing(4)};
 

package/components/PageHeader/PageHeader.js

@@ -31,7 +31,7 @@ const rootCva = cva(pageHeaderClassnames.root, {
     },
 });
 export const PageHeader = (props) => {
-    const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
+    const { title, description, subheader, breadcrumbs, tabs, actions, backButton, className, filters, } = props;
     const { isLoading, mobileTitleActions, isShowMobileActions } = useLogic(props);
     return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobilePageHeaderCva({
                     hasTitle: Boolean(title) || isLoading,
@@ -40,5 +40,5 @@ export const PageHeader = (props) => {
                     hasActions: Boolean(actions),
                     hasSubheader: Boolean(subheader),
                     hasFilters: Boolean(filters),
-                }), className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
+                }), className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, tabs: tabs, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
 };

package/components/PageHeader/styles.js

@@ -38,7 +38,7 @@ export const Wrapper = styled.header `
 
   .${pageHeaderClassnames.filters} {
     grid-column: 1 / -1;
-    grid-row: 4;
+    grid-row: 6;
 
     ${({ theme }) => theme.breakpoints.down('laptop')} {
       grid-column: 3;
@@ -48,7 +48,7 @@ export const Wrapper = styled.header `
 
   .${pageHeaderClassnames.quickFilters} {
     grid-column: 1 / -1;
-    grid-row: 5;
+    grid-row: 7;
 
     margin-top: ${({ theme }) => theme.spacing(4)};
 

package/components/PageHeader/types.d.ts

@@ -34,6 +34,16 @@ export type PageHeaderProps<TMainActionComponent extends ElementType = ElementTy
      * } />
      */
     breadcrumbs?: ReactNode;
+    /**
+     * Слот для tabs
+     * @example <PageHeader tabs={
+     * <Tabs value={tabValue} onChange={handleChange}>
+     *  <Tab label="Вкладка 1" />
+     *  <Tab label="Вкладка 2" />
+     * </Tabs>
+     * } />
+     */
+    tabs?: ReactNode;
     /**
      * Набор кнопок, видимые конфигурируются через объект main, скрытые в меню -
      * через secondary

package/components/createGlobalState/createGlobalState.d.ts

@@ -0,0 +1,6 @@
+import { type IHookStateInitAction, type IHookStateSetAction } from './utils/types';
+export declare function createGlobalState<TState>(initialState: IHookStateInitAction<TState>): () => [TState, (state: IHookStateSetAction<TState>) => void];
+export declare function createGlobalState<TState = undefined>(): () => [
+    TState,
+    (state: IHookStateSetAction<TState>) => void
+];

package/components/createGlobalState/createGlobalState.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { resolveHookState } from './utils/resolveHookState';
+export function createGlobalState(initialState) {
+    const store = {
+        state: initialState instanceof Function ? initialState() : initialState,
+        setState(nextState) {
+            store.state = resolveHookState(nextState, store.state);
+            store.setters.forEach((setter) => setter(store.state));
+        },
+        setters: [],
+    };
+    return () => {
+        const [globalState, stateSetter] = useState(store.state);
+        useEffect(() => () => {
+            store.setters = store.setters.filter((setter) => setter !== stateSetter);
+        }, []);
+        useIsomorphicLayoutEffect(() => {
+            if (!store.setters.includes(stateSetter)) {
+                store.setters.push(stateSetter);
+            }
+        });
+        return [globalState, store.setState];
+    };
+}

package/components/createGlobalState/index.d.ts

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

package/components/createGlobalState/index.js

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

package/components/createGlobalState/public.d.ts

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

package/components/createGlobalState/public.js

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

package/components/createGlobalState/utils/index.d.ts

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

package/components/createGlobalState/utils/index.js

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

package/components/createGlobalState/utils/resolveHookState/index.d.ts

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

package/components/createGlobalState/utils/resolveHookState/index.js

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

package/components/createGlobalState/utils/resolveHookState/resolveHookState.d.ts

@@ -0,0 +1,4 @@
+import { type IHookStateInitAction, type IHookStateResolvable, type IHookStateSetAction } from '../types';
+export declare function resolveHookState<TState>(nextState: IHookStateInitAction<TState>): TState;
+export declare function resolveHookState<TState, TCurrentState extends TState>(nextState: IHookStateSetAction<TState>, currentState?: TCurrentState): TState;
+export declare function resolveHookState<TState, TCurrentState extends TState>(nextState: IHookStateResolvable<TState>, currentState?: TCurrentState): TState;

package/components/createGlobalState/utils/resolveHookState/resolveHookState.js

@@ -0,0 +1,8 @@
+export function resolveHookState(nextState, currentState) {
+    if (typeof nextState === 'function') {
+        return nextState.length
+            ? nextState(currentState)
+            : nextState();
+    }
+    return nextState;
+}

package/components/createGlobalState/utils/types.d.ts

@@ -0,0 +1,5 @@
+export type IHookStateInitialSetter<TState> = () => TState;
+export type IHookStateInitAction<TState> = TState | IHookStateInitialSetter<TState>;
+export type IHookStateSetter<TState> = ((prevState: TState) => TState) | (() => TState);
+export type IHookStateSetAction<TState> = TState | IHookStateSetter<TState>;
+export type IHookStateResolvable<TState> = TState | IHookStateInitialSetter<TState> | IHookStateSetter<TState>;

package/components/createGlobalState/utils/types.js

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

package/components/useDebounce/hooks/useTimeoutFn/index.d.ts

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

package/components/useDebounce/hooks/useTimeoutFn/index.js

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

package/components/useDebounce/hooks/useTimeoutFn/useTimeoutFn.d.ts

@@ -0,0 +1,2 @@
+export type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
+export declare function useTimeoutFn(fn: Function, ms?: number): UseTimeoutFnReturn;

package/components/useDebounce/hooks/useTimeoutFn/useTimeoutFn.js

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useRef } from 'react';
+export function useTimeoutFn(fn, ms = 0) {
+    const ready = useRef(false);
+    const timeout = useRef(null);
+    const callback = useRef(fn);
+    const isReady = useCallback(() => ready.current, []);
+    const set = useCallback(() => {
+        ready.current = false;
+        timeout.current && clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => {
+            ready.current = true;
+            callback.current();
+        }, ms);
+    }, [ms]);
+    const clear = useCallback(() => {
+        ready.current = null;
+        timeout.current && clearTimeout(timeout.current);
+    }, []);
+    // update ref when function changes
+    useEffect(() => {
+        callback.current = fn;
+    }, [fn]);
+    // set on mount, clear on unmount
+    useEffect(() => {
+        set();
+        return clear;
+    }, [ms]);
+    return [isReady, clear, set];
+}

package/components/useDebounce/index.d.ts

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

package/components/useDebounce/index.js

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

package/components/useDebounce/public.d.ts

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

package/components/useDebounce/public.js

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

package/components/useDebounce/useDebounce.d.ts

@@ -0,0 +1,6 @@
+import { type DependencyList } from 'react';
+export type UseDebounceReturn = [() => boolean | null, () => void];
+/**
+ * Хук откладывает вызов функции, пока не пройдет переданное число миллисекунд после последнего вызова debounce-функции.
+ */
+export declare function useDebounce(fn: Function, ms?: number, deps?: DependencyList): UseDebounceReturn;

package/components/useDebounce/useDebounce.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+import { useTimeoutFn } from './hooks/useTimeoutFn';
+/**
+ * Хук откладывает вызов функции, пока не пройдет переданное число миллисекунд после последнего вызова debounce-функции.
+ */
+export function useDebounce(fn, ms = 0, deps = []) {
+    const [isReady, cancel, reset] = useTimeoutFn(fn, ms);
+    useEffect(reset, deps);
+    return [isReady, cancel];
+}

package/components/useFirstMountState/index.d.ts

@@ -1 +1 @@
-export { useFirstMountState } from './useFirstMountState';
+export * from './useFirstMountState';

package/components/useFirstMountState/index.js

@@ -1 +1 @@
-export { useFirstMountState } from './useFirstMountState';
+export * from './useFirstMountState';

package/components/useFirstMountState/public.d.ts

@@ -1 +1 @@
-export { useFirstMountState } from './useFirstMountState';
+export * from './useFirstMountState';

package/components/useFirstMountState/public.js

@@ -1 +1 @@
-export { useFirstMountState } from './useFirstMountState';
+export * from './useFirstMountState';

package/components/useFirstMountState/useFirstMountState.d.ts

@@ -1 +1,4 @@
-export { useFirstMountState } from 'react-use';
+/**
+ * Хук возвращает true если компонент только монтировался (при первом рендере) и false в другом случае.
+ */
+export declare function useFirstMountState(): boolean;

package/components/useFirstMountState/useFirstMountState.js

@@ -1 +1,12 @@
-export { useFirstMountState } from 'react-use';
+import { useRef } from 'react';
+/**
+ * Хук возвращает true если компонент только монтировался (при первом рендере) и false в другом случае.
+ */
+export function useFirstMountState() {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+}

package/components/useIntersection/index.d.ts

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

package/components/useIntersection/index.js

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

package/components/useIntersection/public.d.ts

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

package/components/useIntersection/public.js

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

package/components/useIntersection/useIntersection.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from 'react';
+/**
+ * Хук отслеживает изменения в пересечении целевого элемента с родительским элементом или с верхним уровнем области просмотра документа.
+ */
+export declare const useIntersection: (ref: RefObject<HTMLElement | null>, options: IntersectionObserverInit) => IntersectionObserverEntry | null;

package/components/useIntersection/useIntersection.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+/**
+ * Хук отслеживает изменения в пересечении целевого элемента с родительским элементом или с верхним уровнем области просмотра документа.
+ */
+export const useIntersection = (ref, options) => {
+    const [intersectionObserverEntry, setIntersectionObserverEntry] = useState(null);
+    useEffect(() => {
+        if (ref.current && typeof IntersectionObserver === 'function') {
+            const handler = (entries) => {
+                setIntersectionObserverEntry(entries[0]);
+            };
+            const observer = new IntersectionObserver(handler, options);
+            observer.observe(ref.current);
+            return () => {
+                setIntersectionObserverEntry(null);
+                observer.disconnect();
+            };
+        }
+        return () => { };
+    }, [ref.current, options.threshold, options.root, options.rootMargin]);
+    return intersectionObserverEntry;
+};

package/components/useInterval/index.d.ts

@@ -1 +1 @@
-export { useInterval } from './useInterval';
+export * from './useInterval';

package/components/useInterval/index.js

@@ -1 +1 @@
-export { useInterval } from './useInterval';
+export * from './useInterval';

package/components/useInterval/public.d.ts

@@ -1 +1 @@
-export { useInterval } from './useInterval';
+export * from './useInterval';

package/components/useInterval/public.js

@@ -1 +1 @@
-export { useInterval } from './useInterval';
+export * from './useInterval';

package/components/useInterval/useInterval.d.ts

@@ -1 +1,6 @@
-export { useInterval } from 'react-use';
+/**
+ * Хук для запуска функции с заданным интервалом.
+ * Если передать null, интервал не будет запущен (или будет остановлен).
+ * Если значение не указано (undefined), используется задержка 0 мс.
+ */
+export declare const useInterval: (callback: Function, delay?: number | null) => void;

package/components/useInterval/useInterval.js

@@ -1 +1,19 @@
-export { useInterval } from 'react-use';
+import { useEffect, useRef } from 'react';
+/**
+ * Хук для запуска функции с заданным интервалом.
+ * Если передать null, интервал не будет запущен (или будет остановлен).
+ * Если значение не указано (undefined), используется задержка 0 мс.
+ */
+export const useInterval = (callback, delay) => {
+    const savedCallback = useRef(() => { });
+    useEffect(() => {
+        savedCallback.current = callback;
+    });
+    useEffect(() => {
+        if (delay !== null) {
+            const interval = setInterval(() => savedCallback.current(), delay || 0);
+            return () => clearInterval(interval);
+        }
+        return undefined;
+    }, [delay]);
+};

package/components/useIsomorphicLayoutEffect/index.d.ts

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

package/components/useIsomorphicLayoutEffect/index.js

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

package/components/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/components/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -0,0 +1,5 @@
+import { useEffect, useLayoutEffect } from 'react';
+import { isBrowser } from '../utils/isBrowser';
+export const useIsomorphicLayoutEffect = isBrowser
+    ? useLayoutEffect
+    : useEffect;

package/components/useLocalStorage/index.d.ts

@@ -1 +1 @@
-export * from './useLocalStorage';
+export { default as useLocalStorage } from './useLocalStorage';

package/components/useLocalStorage/index.js

@@ -1 +1 @@
-export * from './useLocalStorage';
+export { default as useLocalStorage } from './useLocalStorage';

package/components/useLocalStorage/public.d.ts

@@ -1 +1 @@
-export * from './useLocalStorage';
+export { default as useLocalStorage } from './useLocalStorage';

package/components/useLocalStorage/public.js

@@ -1 +1 @@
-export * from './useLocalStorage';
+export { default as useLocalStorage } from './useLocalStorage';

package/components/useLocalStorage/useLocalStorage.d.ts

@@ -1 +1,15 @@
-export { useLocalStorage } from 'react-use';
+import { type Dispatch, type SetStateAction } from 'react';
+type ParserOptions<T> = {
+    raw: true;
+} | {
+    raw: false;
+    serializer: (value: T) => string;
+    deserializer: (value: string) => T;
+};
+/**
+ * Хук управляет состоянием, которое синхронизируется с localStorage браузера.
+ * Возвращает текущее значение, функцию для его обновления и функцию для удаления значения из localStorage.
+ */
+export declare const useLocalStorage: <T>(key: string, initialValue?: T | undefined, options?: ParserOptions<T> | undefined) => [T | undefined, Dispatch<SetStateAction<T | undefined>>, () => void];
+declare const useLocalStorageExport: <T>(key: string, initialValue?: T | undefined, options?: ParserOptions<T> | undefined) => [T | undefined, Dispatch<SetStateAction<T | undefined>>, () => void];
+export default useLocalStorageExport;

package/components/useLocalStorage/useLocalStorage.js

@@ -1 +1,96 @@
-export { useLocalStorage } from 'react-use';
+import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { isBrowser } from '../utils/isBrowser';
+const noop = () => { };
+/**
+ * Хук управляет состоянием, которое синхронизируется с localStorage браузера.
+ * Возвращает текущее значение, функцию для его обновления и функцию для удаления значения из localStorage.
+ */
+export const useLocalStorage = (key, initialValue, options) => {
+    if (!key) {
+        throw new Error('useLocalStorage key may not be falsy');
+    }
+    const deserializer = (() => {
+        if (!options) {
+            return JSON.parse;
+        }
+        if (options.raw) {
+            return (value) => value;
+        }
+        return options.deserializer;
+    })();
+    const serializer = (() => {
+        if (!options) {
+            return JSON.stringify;
+        }
+        if (options.raw) {
+            return String;
+        }
+        return options.serializer;
+    })();
+    const initializer = useRef((newKey) => {
+        try {
+            const localStorageValue = localStorage.getItem(newKey);
+            if (localStorageValue !== null) {
+                return deserializer(localStorageValue);
+            }
+            if (initialValue) {
+                localStorage.setItem(newKey, serializer(initialValue));
+            }
+            return initialValue;
+        }
+        catch {
+            // If user is in private mode or has storage restriction
+            // localStorage can throw. JSON.parse and JSON.stringify
+            // can throw, too.
+            return initialValue;
+        }
+    });
+    const [state, setState] = useState(() => initializer.current(key));
+    useLayoutEffect(() => setState(initializer.current(key)), [key]);
+    const serializeValue = (value, parserOptions) => {
+        if (!parserOptions) {
+            return JSON.stringify(value);
+        }
+        if (parserOptions.raw) {
+            return typeof value === 'string' ? value : JSON.stringify(value);
+        }
+        return parserOptions.serializer(value);
+    };
+    const set = useCallback((valOrFunc) => {
+        try {
+            const newState = typeof valOrFunc === 'function'
+                ? valOrFunc(state)
+                : valOrFunc;
+            if (typeof newState === 'undefined') {
+                return;
+            }
+            const value = serializeValue(newState, options);
+            localStorage.setItem(key, value);
+            setState(deserializer(value));
+        }
+        catch {
+            // If user is in private mode or has storage restriction
+            // localStorage can throw. Also JSON.stringify can throw.
+        }
+    }, [key, setState]);
+    const remove = useCallback(() => {
+        try {
+            localStorage.removeItem(key);
+            setState(undefined);
+        }
+        catch {
+            // If user is in private mode or has storage restriction
+            // localStorage can throw.
+        }
+    }, [key, setState]);
+    return [state, set, remove];
+};
+const useLocalStorageFallback = ((initialValue) => [
+    initialValue,
+    noop,
+    noop,
+]);
+const useLocalStorageExport = isBrowser
+    ? useLocalStorage
+    : useLocalStorageFallback;
+export default useLocalStorageExport;

package/components/useMeasure/index.d.ts

@@ -0,0 +1 @@
+export { default as useMeasure } from './useMeasure';

package/components/useMeasure/index.js

@@ -0,0 +1 @@
+export { default as useMeasure } from './useMeasure';

package/components/useMeasure/public.d.ts

@@ -0,0 +1 @@
+export { default as useMeasure } from './useMeasure';

package/components/useMeasure/public.js

@@ -0,0 +1 @@
+export { default as useMeasure } from './useMeasure';

package/components/useMeasure/useMeasure.d.ts

@@ -0,0 +1,13 @@
+export type UseMeasureRect = Pick<DOMRectReadOnly, 'x' | 'y' | 'top' | 'left' | 'right' | 'bottom' | 'height' | 'width'>;
+export type UseMeasureRef<TElement extends Element = Element> = (element: TElement) => void;
+export type UseMeasureResult<TElement extends Element = Element> = [
+    UseMeasureRef<TElement>,
+    UseMeasureRect
+];
+/**
+ * Хук отслеживает размеры HTML-элемента с помощью Resize Observer API.
+ * Принимает ref на HTML-элемент и возвращает объект с размерами элемента.
+ */
+declare function useMeasure<TElement extends Element = Element>(): UseMeasureResult<TElement>;
+declare const useMeasureExport: typeof useMeasure;
+export default useMeasureExport;