@alfalab/core-components-tabs 7.7.2 → 8.0.0

package/esm/components/tabs/Component.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
 import { TabsProps } from "../../typings";
-declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatch, children, selectedId, scrollable, collapsible, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, }: Omit<TabsProps, 'view'>) => React.JSX.Element;
+declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, breakpoint, }: Omit<TabsProps, 'view'>) => React.JSX.Element;
 export { Tabs };

package/esm/components/tabs/Component.desktop.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { TabsProps } from "../../typings";
-type TabsDesktopProps = Omit<TabsProps, 'TabList' | 'fullWidthScroll'>;
+type TabsDesktopProps = Omit<TabsProps, 'TabList' | 'fullWidthScroll' | 'breakpoint' | 'collapsedTabsIds'>;
 declare const TabsDesktop: ({ view, scrollable, size, ...restProps }: TabsDesktopProps) => React.JSX.Element;
 export { TabsDesktopProps, TabsDesktop };

package/esm/components/tabs/Component.desktop.js

@@ -5,22 +5,16 @@ import { SecondaryTabListDesktop } from '../secondary-tablist/Component.desktop.
 import { Tabs } from './Component.js';
 import '../primary-tablist/Component.js';
 import 'classnames';
-import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
-import '@alfalab/core-components-picker-button/esm/desktop';
-import '../../hooks/use-tablist-titles.js';
-import '@alfalab/hooks';
-import '../../hooks/use-collapsible-elements.js';
-import '@juggle/resize-observer';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
+import '@alfalab/core-components-shared/esm';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';
-import '../../index.module-e99388b2.js';
+import '../../index.module-2bed7b44.js';
+import '@alfalab/core-components-tag/esm/desktop';
 import '../secondary-tablist/Component.js';
-import '@alfalab/core-components-tag/esm';
-import '../../index.module-635513a6.js';
+import '../../index.module-08248cf3.js';
 
 var views = {
     primary: PrimaryTabListDesktop,

package/esm/components/tabs/Component.js

@@ -1,7 +1,7 @@
 import React, { cloneElement } from 'react';
 
 var Tabs = function (_a) {
-    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatch = _a.defaultMatch, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsible = _a.collapsible, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange;
+    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, _d = _a.breakpoint, breakpoint = _d === void 0 ? 1024 : _d;
     var tabsArray = React.Children.toArray(children);
     var titles = tabsArray.map(function (_a) {
         var _b = _a.props, title = _b.title, id = _b.id, rightAddons = _b.rightAddons, disabled = _b.disabled, hidden = _b.hidden, toggleClassName = _b.toggleClassName, toggleTestId = _b.dataTestId;
@@ -17,7 +17,7 @@ var Tabs = function (_a) {
     });
     var tabs = tabsArray.filter(function (tab) { return tab.props.id === selectedId || tab.props.keepMounted || keepMounted; });
     return (React.createElement("div", { className: className },
-        React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsible: collapsible, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch, fullWidthScroll: fullWidthScroll }),
+        React.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll, breakpoint: breakpoint }),
         tabs.map(function (tab) { return cloneElement(tab, { hidden: tab.props.id !== selectedId }); })));
 };
 

package/esm/components/tabs/Component.mobile.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { TabsProps } from "../../typings";
-type TabsMobileProps = Omit<TabsProps, 'TabList' | 'size' | 'collapsible' | 'collapsedTabsIds'>;
+type TabsMobileProps = Omit<TabsProps, 'TabList' | 'size' | 'collapsedTabsIds'>;
 declare const TabsMobile: ({ view, scrollable, ...restProps }: TabsMobileProps) => React.JSX.Element;
 export { TabsMobileProps, TabsMobile };

package/esm/components/tabs/Component.mobile.js

@@ -5,22 +5,17 @@ import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile.js
 import { Tabs } from './Component.js';
 import 'classnames';
 import '../primary-tablist/Component.js';
-import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
-import '@alfalab/core-components-picker-button/esm/desktop';
-import '../../hooks/use-tablist-titles.js';
-import '@alfalab/hooks';
-import '../../hooks/use-collapsible-elements.js';
-import '@juggle/resize-observer';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
+import '@alfalab/core-components-shared/esm';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';
-import '../../index.module-e99388b2.js';
+import '../../index.module-2bed7b44.js';
+import '../../mobile.module-d8a1b124.js';
+import '@alfalab/core-components-tag/esm/mobile';
 import '../secondary-tablist/Component.js';
-import '@alfalab/core-components-tag/esm';
-import '../../index.module-635513a6.js';
+import '../../index.module-08248cf3.js';
 
 var views = {
     primary: PrimaryTabListMobile,

package/esm/components/tabs/Component.responsive.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
 import { TabsProps } from "../../typings";
-type TabsResponsiveProps = Omit<TabsProps, 'TabList'>;
+type TabsResponsiveProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;
 declare const TabsResponsive: ({ view, scrollable, ...restProps }: TabsResponsiveProps) => React.JSX.Element;
 export { TabsResponsiveProps, TabsResponsive };

package/esm/components/tabs/Component.responsive.js

@@ -3,28 +3,25 @@ import React from 'react';
 import { PrimaryTabListResponsive } from '../primary-tablist/Component.responsive.js';
 import { SecondaryTabListResponsive } from '../secondary-tablist/Component.responsive.js';
 import { Tabs } from './Component.js';
-import '@alfalab/hooks';
+import '@alfalab/core-components-mq/esm';
 import '../primary-tablist/Component.desktop.js';
 import '../primary-tablist/Component.js';
 import 'classnames';
-import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
-import '@alfalab/core-components-picker-button/esm/desktop';
-import '../../hooks/use-tablist-titles.js';
-import '../../hooks/use-collapsible-elements.js';
-import '@juggle/resize-observer';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
+import '@alfalab/core-components-shared/esm';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';
-import '../../index.module-e99388b2.js';
+import '../../index.module-2bed7b44.js';
 import '../primary-tablist/Component.mobile.js';
+import '../../mobile.module-d8a1b124.js';
 import '../secondary-tablist/Component.desktop.js';
+import '@alfalab/core-components-tag/esm/desktop';
 import '../secondary-tablist/Component.js';
-import '@alfalab/core-components-tag/esm';
-import '../../index.module-635513a6.js';
+import '../../index.module-08248cf3.js';
 import '../secondary-tablist/Component.mobile.js';
+import '@alfalab/core-components-tag/esm/mobile';
 
 var views = {
     primary: PrimaryTabListResponsive,

package/esm/desktop-2e2b2125.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-2e2b2125";
+export {};

package/esm/desktop.d.ts

@@ -1,8 +1,4 @@
 export * from "./components/primary-tablist/Component.desktop";
-export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.desktop";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.desktop";
-export * from "./hooks/use-tabs";
-export * from "./hooks/use-collapsible-elements";
-export * from "./typings";

package/esm/desktop.js

@@ -1,25 +1,19 @@
 export { PrimaryTabListDesktop } from './components/primary-tablist/Component.desktop.js';
-export { ScrollableContainer } from './components/scrollable-container/Component.js';
 export { SecondaryTabListDesktop } from './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 export { TabsDesktop } from './components/tabs/Component.desktop.js';
-export { useTabs } from './hooks/use-tabs.js';
-export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
 import 'tslib';
 import 'react';
 import './components/primary-tablist/Component.js';
 import 'classnames';
-import '@alfalab/core-components-badge/esm';
 import '@alfalab/core-components-keyboard-focusable/esm';
-import '@alfalab/core-components-picker-button/esm/desktop';
-import './hooks/use-tablist-titles.js';
-import '@alfalab/hooks';
-import './synthetic-events.js';
-import './components/title/Component.js';
-import './index.module-e99388b2.js';
+import './hooks/use-tabs.js';
+import '@alfalab/core-components-shared/esm';
+import './components/scrollable-container/Component.js';
 import 'compute-scroll-into-view';
+import './components/title/Component.js';
+import './index.module-2bed7b44.js';
+import '@alfalab/core-components-tag/esm/desktop';
 import './components/secondary-tablist/Component.js';
-import '@alfalab/core-components-tag/esm';
-import './index.module-635513a6.js';
+import './index.module-08248cf3.js';
 import './components/tabs/Component.js';
-import '@juggle/resize-observer';

package/{hook-3e68f8db.d.ts → esm/hook-9ea9e32c.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseSelectProps, OptionShape } from "./index-3e68f8db";
+import { BaseSelectProps, OptionShape } from "./typings-5e1b8383";
 type UseSelectWithApplyProps = {
     /**
      * Список выбранных пунктов
@@ -36,18 +36,20 @@ type UseSelectWithApplyProps = {
 };
 declare const SELECT_ALL_KEY = "select_all";
 declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, }: UseSelectWithApplyProps): {
-    OptionsList: import("react").ForwardRefExoticComponent<import("./index-3e68f8db").OptionsListProps & {
+    OptionsList: import("react").ForwardRefExoticComponent<import("./typings-5e1b8383").OptionsListProps & {
         showClear?: boolean | undefined;
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
-        OptionsList?: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
-        Footer?: import("react").FC<import("./Component-ebda875c").FooterProps> | undefined;
+        OptionsList?: import("react").FC<import("./typings-5e1b8383").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        Footer?: import("react").FC<import("./Component-5e1b8383").FooterProps> | undefined;
         Header?: import("react").FC<import("./Component-ebda875c").HeaderProps> | undefined;
-        headerProps?: import("./Component-ebda875c").HeaderProps | undefined;
+        headerProps?: import("./Component-ebda875c").HeaderProps | undefined; /**
+         * Показывать кнопку очистки
+         */
         showHeaderWithSelectAll?: boolean | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
-        OptionsList: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        OptionsList: import("react").FC<import("./typings-5e1b8383").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
         showClear: boolean;
         onClear: () => void;
         onApply: () => void;
@@ -62,11 +64,11 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
     };
     allowUnselect: boolean;
     multiple: boolean;
-    options: (OptionShape | import("./index-3e68f8db").GroupShape | {
+    options: (OptionShape | import("./typings-5e1b8383").GroupShape | {
         key: string;
         content: string;
     })[];
-    onChange: (payload: import("./index-3e68f8db").BaseSelectChangePayload) => void;
+    onChange: (payload: import("./typings-5e1b8383").BaseSelectChangePayload) => void;
     selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
 };
 export * from "./Component-5e1b8383";

package/esm/hooks/use-tablist-titles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TabListProps } from "../typings";
-declare const useTablistTitles: ({ titles, selectedId, collapsible, collapsedTabsIds, breakpoint, onChange, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsible' | 'collapsedTabsIds' | 'onChange'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
+declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, breakpoint, onChange, defaultMatchMediaValue, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsedTabsIds' | 'onChange' | 'defaultMatchMediaValue'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
     containerRef: import("react").RefObject<HTMLDivElement>;
     addonRef: import("react").RefObject<HTMLInputElement>;
     tablistTitles: {
@@ -20,6 +20,7 @@ declare const useTablistTitles: ({ titles, selectedId, collapsible, collapsedTab
         role: string;
         tabIndex: number;
         'aria-selected': boolean;
+        selected: boolean;
         'data-test-id': string | undefined;
         disabled: boolean | undefined;
         ref: (node: HTMLButtonElement) => void;

package/esm/hooks/use-tablist-titles.js

@@ -1,18 +1,20 @@
 import { __assign } from 'tslib';
 import { useMemo } from 'react';
-import { useMedia } from '@alfalab/hooks';
+import { useMatchMedia } from '@alfalab/core-components-mq/esm';
 import { useCollapsibleElements } from './use-collapsible-elements.js';
 import { useTabs } from './use-tabs.js';
 import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '@alfalab/core-components-shared/esm';
 
 var useTablistTitles = function (_a) {
-    var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsible = _a.collapsible, collapsedTabsIds = _a.collapsedTabsIds, breakpoint = _a.breakpoint, onChange = _a.onChange;
+    var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsedTabsIds = _a.collapsedTabsIds, breakpoint = _a.breakpoint, onChange = _a.onChange, defaultMatchMediaValue = _a.defaultMatchMediaValue;
     var _c = useCollapsibleElements('[role=tab]', [titles, collapsedTabsIds]), containerRef = _c.containerRef, addonRef = _c.addonRef, idsCollapsedElements = _c.idsCollapsedElements;
-    var view = useMedia([['desktop', "(min-width: ".concat(breakpoint, "px)")]], 'desktop')[0];
+    var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     var tablistTitles = useMemo(function () {
         var idsCollapsedTitles = [];
         var idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);
-        if (view === 'desktop' && collapsible) {
+        if (isDesktop) {
             var visibleTitles = titles.filter(function (_a) {
                 var id = _a.id;
                 return !idsCollapsed.includes(String(id));
@@ -46,7 +48,7 @@ var useTablistTitles = function (_a) {
             }
             return a.collapsed ? 1 : -1;
         });
-    }, [collapsedTabsIds, idsCollapsedElements, view, collapsible, titles, selectedId]);
+    }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);
     var _d = useTabs({
         titles: tablistTitles,
         selectedId: selectedId,

package/esm/hooks/use-tabs.d.ts

@@ -5,6 +5,7 @@ declare function useTabs({ titles, selectedId, onChange }: UseTabsProps): {
         role: string;
         tabIndex: number;
         'aria-selected': boolean;
+        selected: boolean;
         'data-test-id': string | undefined;
         disabled: boolean | undefined;
         ref: (node: HTMLButtonElement) => void;

package/esm/hooks/use-tabs.js

@@ -1,9 +1,5 @@
 import { useState, useRef, useCallback } from 'react';
-
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
+import { getDataTestId } from '@alfalab/core-components-shared/esm';
 
 function useTabs(_a) {
     var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, onChange = _a.onChange;
@@ -78,6 +74,7 @@ function useTabs(_a) {
             role: 'tab',
             tabIndex: itemSelected ? 0 : -1,
             'aria-selected': itemSelected,
+            selected: itemSelected,
             'data-test-id': getDataTestId(item.dataTestId, 'toggle'),
             disabled: item.disabled,
             ref: function (node) {

package/esm/index-8b2c2707.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from "react";
+import { ButtonProps } from "./typings-9211a437";
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { Button };
+export type { ButtonProps } from "./typings-9211a437";

package/esm/index-c44170fe.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import React from "react";
+type InputProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+type InputDesktopProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
+declare const InputDesktop: React.ForwardRefExoticComponent<InputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+type InputMobileProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { InputProps, Input, InputDesktopProps, InputDesktop, InputMobileProps, InputMobile };
+export * from "./Component.desktop-785df74d";

package/esm/index-e81c389f.d.ts

@@ -1,3 +1,142 @@
-export * from "./Component-3885b0d7";
-export * from "./index-ebda875c";
-export type { NavigationBarProps } from "./types-ebda875c";
+/// <reference types="react" />
+/* eslint-disable complexity */
+import React from "react";
+import { ReactNode, ButtonHTMLAttributes, ElementType, FC } from "react";
+interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Вид компонента
+     */
+    view: "desktop" | "mobile";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: "left" | "right";
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Коллбэк закрытия.
+     */
+    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+}
+declare const Closer: FC<CloserProps>;
+type NavigationBarProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Заголовок шапки
+     */
+    title?: string;
+    /**
+     * Подзаголовок (доступен только в мобильной версии)
+     */
+    subtitle?: string;
+    /**
+     * Размер заголовка (compact доступен только в мобильной версии)
+     */
+    titleSize?: "default" | "compact";
+    /**
+     * Доп. класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Дополнительный класс для closer
+     */
+    closerClassName?: string;
+    /**
+     * Слот снизу
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие кнопки "Назад"
+     */
+    hasBackButton?: boolean;
+    /**
+     * Дополнительный класс для правого аддона
+     */
+    backButtonClassName?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительный класс для нижнего аддона
+     */
+    bottomAddonsClassName?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: "left" | "center";
+    /**
+     * Обрезать ли заголовок
+     */
+    trim?: boolean;
+    /**
+     * Фиксирует шапку
+     */
+    sticky?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Фоновое изображение
+     */
+    imageUrl?: string;
+    /**
+     * Иконка closer.
+     */
+    closerIcon?: React.ElementType;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: CloserProps["onClose"];
+    /**
+     * обработчик клика по кнопке "назад"
+     */
+    onBack?: () => void;
+    /**
+     * Вид шапки - мобильный или десктоп
+     */
+    view: "desktop" | "mobile";
+    /**
+     * Ссылка на родительскую ноду overflow: auto
+     */
+    scrollableParentRef?: React.RefObject<HTMLDivElement>;
+};
+declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
+export { NavigationBar, CloserProps, Closer };
+export * from "./Component-63dec22f";
+export * from "./Component-8b2c2707";
+export type { NavigationBarProps };

package/esm/index-ebda875c.d.ts

@@ -1,37 +1,105 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
 import React from "react";
-import { ButtonHTMLAttributes, ElementType, FC } from "react";
-interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import { ButtonHTMLAttributes, ReactNode, RefObject } from "react";
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type NativeProps = ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseTagProps = Omit<NativeProps, "onClick"> & {
     /**
-     * Вид компонента
+     * Отображение кнопки в отмеченном (зажатом) состоянии
      */
-    view: "desktop" | "mobile";
+    checked?: boolean;
     /**
-     * Дополнительный класс
+     * Размер компонента
      */
-    className?: string;
+    size?: "xxs" | "xs" | "s" | "m" | "l" | "xl";
     /**
-     * Позиция крестика
+     * Дочерние элементы.
      */
-    align?: "left" | "right";
+    children?: ReactNode;
     /**
-     * Фиксирует крестик
+     * Дополнительный класс для обёртки children
      */
-    sticky?: boolean;
+    childrenClassName?: string;
     /**
-     * Иконка
+     * Слот слева
      */
-    icon?: ElementType;
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
     /**
-     * Коллбэк закрытия.
+     * Обработчик нажатия
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        checked: boolean;
+        name?: string;
+    }) => void;
+    /**
+     * ref на children
+     */
+    childrenRef?: RefObject<HTMLSpanElement>;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Используйте props shape и view
+     * Вариант тега
+     */
+    variant?: "default" | "alt";
+    /**
+     * Форма тега
+     */
+    shape?: "rounded" | "rectangular";
+    /**
+     * Стиль тега
+     */
+    view?: "outlined" | "filled";
+    /**
+     * Основные стили компонента.
+     */
+    styles?: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
      */
-    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
-}
-declare const Closer: FC<CloserProps>;
-export { CloserProps, Closer };
-export * from "./Component-ebda875c";
+    colorStylesMap?: StyleColors;
+};
+declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClick"> & {
+    checked?: boolean | undefined;
+    size?: "s" | "xxs" | "xs" | "m" | "l" | "xl" | undefined;
+    children?: ReactNode;
+    childrenClassName?: string | undefined;
+    leftAddons?: ReactNode;
+    rightAddons?: ReactNode;
+    dataTestId?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        checked: boolean;
+        name?: string;
+    }) => void) | undefined;
+    childrenRef?: React.RefObject<HTMLSpanElement> | undefined;
+    colors?: "default" | "inverted" | undefined;
+    variant?: "default" | "alt" | undefined;
+    shape?: "rounded" | "rectangular" | undefined;
+    view?: "outlined" | "filled" | undefined;
+    styles?: {
+        [key: string]: string;
+    } | undefined;
+    colorStylesMap?: StyleColors | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { StyleColors, NativeProps, BaseTagProps, BaseTag };