@hh.ru/magritte-ui-nav-bar 1.3.24 → 1.3.26

package/nav-bar-CmjjkPy6.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"actions-container":"magritte-actions-container___CBgYW_1-3-26","actionsContainer":"magritte-actions-container___CBgYW_1-3-26","actions-no-children":"magritte-actions-no-children___rgJUl_1-3-26","actionsNoChildren":"magritte-actions-no-children___rgJUl_1-3-26","actions-left-slot":"magritte-actions-left-slot___DNOj0_1-3-26","actionsLeftSlot":"magritte-actions-left-slot___DNOj0_1-3-26","actions-right-slot":"magritte-actions-right-slot___aodtj_1-3-26","actionsRightSlot":"magritte-actions-right-slot___aodtj_1-3-26","navbar-transparent-end":"magritte-navbar-transparent-end___6KqLR_1-3-26","navbarTransparentEnd":"magritte-navbar-transparent-end___6KqLR_1-3-26","actions-start-stage":"magritte-actions-start-stage___MJ67a_1-3-26","actionsStartStage":"magritte-actions-start-stage___MJ67a_1-3-26","actions-side-slot-content":"magritte-actions-side-slot-content___TlHrX_1-3-26","actionsSideSlotContent":"magritte-actions-side-slot-content___TlHrX_1-3-26","actions-icon-morph":"magritte-actions-icon-morph___-nNgW_1-3-26","actionsIconMorph":"magritte-actions-icon-morph___-nNgW_1-3-26","navbar-transparent-start":"magritte-navbar-transparent-start___wysv0_1-3-26","navbarTransparentStart":"magritte-navbar-transparent-start___wysv0_1-3-26","actions-end-stage":"magritte-actions-end-stage___qHtTV_1-3-26","actionsEndStage":"magritte-actions-end-stage___qHtTV_1-3-26","navbar-not-transparent":"magritte-navbar-not-transparent___5KZNp_1-3-26","navbarNotTransparent":"magritte-navbar-not-transparent___5KZNp_1-3-26","navbar-transparent":"magritte-navbar-transparent___ULEh8_1-3-26","navbarTransparent":"magritte-navbar-transparent___ULEh8_1-3-26","actions-only-stage":"magritte-actions-only-stage___cg10A_1-3-26","actionsOnlyStage":"magritte-actions-only-stage___cg10A_1-3-26","actions-side-slot-content-clone":"magritte-actions-side-slot-content-clone___jDxVm_1-3-26","actionsSideSlotContentClone":"magritte-actions-side-slot-content-clone___jDxVm_1-3-26","actions-center-slot":"magritte-actions-center-slot___hLAy6_1-3-26","actionsCenterSlot":"magritte-actions-center-slot___hLAy6_1-3-26","actions-center-slot-centered":"magritte-actions-center-slot-centered___merXQ_1-3-26","actionsCenterSlotCentered":"magritte-actions-center-slot-centered___merXQ_1-3-26","align-top":"magritte-align-top___-QSFW_1-3-26","alignTop":"magritte-align-top___-QSFW_1-3-26","align-bottom":"magritte-align-bottom___FliHI_1-3-26","alignBottom":"magritte-align-bottom___FliHI_1-3-26","title-container-wrapper":"magritte-title-container-wrapper___DQUcj_1-3-26","titleContainerWrapper":"magritte-title-container-wrapper___DQUcj_1-3-26","title-main-part":"magritte-title-main-part___npoHN_1-3-26","titleMainPart":"magritte-title-main-part___npoHN_1-3-26","title-left-slot":"magritte-title-left-slot___HTE7h_1-3-26","titleLeftSlot":"magritte-title-left-slot___HTE7h_1-3-26","title-container":"magritte-title-container___y9AIx_1-3-26","titleContainer":"magritte-title-container___y9AIx_1-3-26","subtitle-container":"magritte-subtitle-container___nVUBu_1-3-26","subtitleContainer":"magritte-subtitle-container___nVUBu_1-3-26","text-morph-item":"magritte-text-morph-item___-vXru_1-3-26","textMorphItem":"magritte-text-morph-item___-vXru_1-3-26","centered":"magritte-centered___Y2mlP_1-3-26","title-morph-item":"magritte-title-morph-item___t7Wf3_1-3-26","titleMorphItem":"magritte-title-morph-item___t7Wf3_1-3-26","title":"magritte-title___ZbLgP_1-3-26","size-large":"magritte-size-large___ISXfH_1-3-26","sizeLarge":"magritte-size-large___ISXfH_1-3-26","pane-content":"magritte-pane-content___UVmC6_1-3-26","paneContent":"magritte-pane-content___UVmC6_1-3-26","pane-background":"magritte-pane-background___PDZAX_1-3-26","paneBackground":"magritte-pane-background___PDZAX_1-3-26","morph-item":"magritte-morph-item___8kF46_1-3-26","morphItem":"magritte-morph-item___8kF46_1-3-26","morph-item-top":"magritte-morph-item-top___WPEkn_1-3-26","morphItemTop":"magritte-morph-item-top___WPEkn_1-3-26","morph-item-bottom":"magritte-morph-item-bottom___zNbsF_1-3-26","morphItemBottom":"magritte-morph-item-bottom___zNbsF_1-3-26","morph-item-left":"magritte-morph-item-left___T6AMW_1-3-26","morphItemLeft":"magritte-morph-item-left___T6AMW_1-3-26","morph-item-right":"magritte-morph-item-right___EuT1E_1-3-26","morphItemRight":"magritte-morph-item-right___EuT1E_1-3-26","pane":"magritte-pane___f8eFC_1-3-26","start-state-container":"magritte-start-state-container___giBVb_1-3-26","startStateContainer":"magritte-start-state-container___giBVb_1-3-26","end-state-container":"magritte-end-state-container___uiW8Q_1-3-26","endStateContainer":"magritte-end-state-container___uiW8Q_1-3-26","content-container":"magritte-content-container___7s7vv_1-3-26","contentContainer":"magritte-content-container___7s7vv_1-3-26","next-pane":"magritte-next-pane___H2oxQ_1-3-26","nextPane":"magritte-next-pane___H2oxQ_1-3-26","nav-bar":"magritte-nav-bar___RRGe0_1-3-26","navBar":"magritte-nav-bar___RRGe0_1-3-26","nav-bar-overlay":"magritte-nav-bar-overlay___Mq5ZD_1-3-26","navBarOverlay":"magritte-nav-bar-overlay___Mq5ZD_1-3-26","nav-bar-overlay-wrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-3-26","navBarOverlayWrapper":"magritte-nav-bar-overlay-wrapper___y1VpY_1-3-26","nav-bar-content-container":"magritte-nav-bar-content-container___H-WMO_1-3-26","navBarContentContainer":"magritte-nav-bar-content-container___H-WMO_1-3-26","nav-bar-panes-container":"magritte-nav-bar-panes-container___5ZDLa_1-3-26","navBarPanesContainer":"magritte-nav-bar-panes-container___5ZDLa_1-3-26","nav-bar-progressive-blur":"magritte-nav-bar-progressive-blur___qyeUV_1-3-26","navBarProgressiveBlur":"magritte-nav-bar-progressive-blur___qyeUV_1-3-26","nav-bar-stage":"magritte-nav-bar-stage___amDz7_1-3-26","navBarStage":"magritte-nav-bar-stage___amDz7_1-3-26","last-pane":"magritte-last-pane___Hf2No_1-3-26","lastPane":"magritte-last-pane___Hf2No_1-3-26","metrics-mode":"magritte-metrics-mode___h38aX_1-3-26","metricsMode":"magritte-metrics-mode___h38aX_1-3-26","layout-morph":"magritte-layout-morph___I3SPy_1-3-26","layoutMorph":"magritte-layout-morph___I3SPy_1-3-26","animation-stage-progress":"magritte-animation-stage-progress___5FthT_1-3-26","animationStageProgress":"magritte-animation-stage-progress___5FthT_1-3-26","layout-morph-start":"magritte-layout-morph-start___9-krP_1-3-26","layoutMorphStart":"magritte-layout-morph-start___9-krP_1-3-26","layout-morph-end":"magritte-layout-morph-end___LIg4d_1-3-26","layoutMorphEnd":"magritte-layout-morph-end___LIg4d_1-3-26","divider-container":"magritte-divider-container___-NdWi_1-3-26","dividerContainer":"magritte-divider-container___-NdWi_1-3-26"};
+
+export { styles as s };
+//# sourceMappingURL=nav-bar-CmjjkPy6.js.map

package/nav-bar-CmjjkPy6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-bar-CmjjkPy6.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-nav-bar",
-  "version": "1.3.24",
+  "version": "1.3.26",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -31,10 +31,12 @@
     "@hh.ru/magritte-common-use-when-font-loaded": "1.0.14",
     "@hh.ru/magritte-design-tokens": "24.7.0",
     "@hh.ru/magritte-internal-custom-scroll": "2.1.1",
+    "@hh.ru/magritte-internal-default-props-context": "1.0.1",
     "@hh.ru/magritte-ui-divider": "3.1.3",
-    "@hh.ru/magritte-ui-icon": "14.2.7",
+    "@hh.ru/magritte-ui-icon": "14.2.8",
     "@hh.ru/magritte-ui-layer": "3.2.4",
-    "@hh.ru/magritte-ui-mock-component": "1.1.7"
+    "@hh.ru/magritte-ui-mock-component": "1.1.7",
+    "@hh.ru/magritte-ui-typography": "5.3.2"
   },
-  "gitHead": "8f3d9128b3717d8176cb8fcecc75a8e8584df3cb"
+  "gitHead": "fa01b9128d8cb502e80c61cd964d7a8a3a279957"
 }

package/public/Actions.d.ts

@@ -14,13 +14,19 @@ export interface ActionsProps {
     children?: ReactNode;
     /**
      * Включает центрирование контента центрального слота относительно всего компонента.
+     * @default false
      */
     centered?: boolean;
     /**
      * Управляет автоматическим оборачиванием всего контента в компоненты <Morph />.
      * По умолчанию включен, но может быть отключен если требуется более сложное описание анимации
      * чем используется по умолчанию.
+     * @default true
      */
     autoMorph?: boolean;
+    /**
+     * @default center
+     */
+    verticalAlign?: 'top' | 'center' | 'bottom';
 }
 export declare const Actions: FC<PropsWithChildren<ActionsProps>>;

package/public/Actions.js

@@ -1,12 +1,13 @@
 import './../index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { isValidElement, Fragment, Children } from 'react';
+import { useMemo, Children, isValidElement, Fragment } from 'react';
 import classNames from 'classnames';
-import { isIconElement } from '@hh.ru/magritte-ui-icon';
+import { IconDefaultPropsContext, isIconElement } from '@hh.ru/magritte-ui-icon';
 import { EnvironmentFingerprintNode } from './EnvironmentFingerprintNode.js';
 import { Morph } from './Morph.js';
 import { useAnimationStage } from './Stage.js';
-import { s as styles } from '../NavBar-Cp0mcX9W.js';
+import { useActionsDefaultProps, useActionsIconsDefaultProps } from './defaultProps.js';
+import { s as styles } from '../nav-bar-CmjjkPy6.js';
 import '../internal/MetricsProvider.js';
 import '../internal/utils.js';
 import 'motion';
@@ -14,32 +15,47 @@ import 'motion/react';
 import '../internal/MorphStore.js';
 import '../internal/KeyedSubscriptions.js';
 import '../internal/PaneStore.js';
+import '../internal/NavBarContext.js';
 import '../internal/useInert.js';
-import '@hh.ru/magritte-ui-divider';
-import '@hh.ru/magritte-ui-layer';
-import '../internal/useAnimationRanges.js';
-import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useNavBarMetrics.js';
-import '../internal/useResetFocus.js';
-import '../internal/useScrollAdapter.js';
-import '@hh.ru/magritte-internal-custom-scroll';
-import '../internal/useSnapScroll.js';
-import '../internal/useSyncMotionValue.js';
+import '@hh.ru/magritte-internal-default-props-context';
 
+const isFragmentElement = (node) => isValidElement(node) && node.type === Fragment;
+/**
+ * Базовые дефолтные пропсы иконок в боковых слотах `Actions`. Через `NavBarDefaultPropsContext`
+ * (ключ `actionsIcons`) их можно переопределить; на иконки центрального слота не распространяются.
+ */
+const SIDE_SLOT_ICON_DEFAULT_PROPS = {
+    padding: 8,
+    initialColor: 'primary',
+    backgroundStyle: 'overlay-action',
+    borderRadius: 'halfHeight',
+};
 const wrapToMorph = (node, isRight) => {
-    const arr = isValidElement(node) && node.type === Fragment
-        ? Children.toArray(node.props.children)
-        : Children.toArray(node);
+    const arr = isFragmentElement(node) ? Children.toArray(node.props.children) : Children.toArray(node);
     return arr.map((node, index) => (jsx(Morph, { className: isIconElement(node) ? styles.actionsIconMorph : '', id: `actions-component-${isRight ? 'right' : 'left'}-slot-item-${isRight ? arr.length - index : index}`, children: node }, index)));
 };
-const Actions = ({ children, left, right, centered = false, autoMorph = true, }) => {
+const wrapToDiv = (node) => {
+    const arr = isFragmentElement(node) ? Children.toArray(node.props.children) : Children.toArray(node);
+    return arr.map((node, index) => (jsx("div", { className: isIconElement(node) ? styles.actionsIconMorph : '', children: node }, index)));
+};
+const Actions = (props) => {
+    const defaultProps = useActionsDefaultProps();
+    const { children, left, right, centered = false, autoMorph = true, verticalAlign = 'center', } = { ...defaultProps, ...props };
+    const actionsIconsOverride = useActionsIconsDefaultProps();
+    const sideSlotIconProps = useMemo(
+    // Каст: спред union-типа `IconProps` (ветки styled/hexed с взаимоисключающими `initialColor`/`hex`)
+    // TS не сводит обратно к `Partial<IconProps>`, хотя мёрж семантически корректен.
+    () => ({ ...SIDE_SLOT_ICON_DEFAULT_PROPS, ...actionsIconsOverride }), [actionsIconsOverride]);
     const stage = useAnimationStage();
     return (jsxs("div", { className: classNames(styles.actionsContainer, {
             [styles.actionsStartStage]: stage === 'start',
             [styles.actionsEndStage]: stage === 'end',
             [styles.actionsOnlyStage]: stage === 'only',
             [styles.actionsNoChildren]: !children,
-        }), children: [(!!left || (!!right && centered)) && (jsxs("div", { className: styles.actionsLeftSlot, children: [!!left && (jsx(EnvironmentFingerprintNode, { className: styles.actionsSideSlotContent, children: autoMorph && stage !== 'only' ? wrapToMorph(left, false) : left })), centered && !!right && (jsx("div", { className: styles.actionsSideSlotContentClone, "aria-hidden": "true", "data-qa": "actions-duplicate-container", inert: 'true', children: right }))] })), (!!children || !left || !right) && (jsx("div", { className: classNames(styles.actionsCenterSlot, { [styles.actionsCenterSlotCentered]: centered }), children: children })), (!!right || (!!left && centered)) && (jsxs("div", { className: styles.actionsRightSlot, children: [!!right && (jsx(EnvironmentFingerprintNode, { className: styles.actionsSideSlotContent, children: autoMorph && stage !== 'only' ? wrapToMorph(right, true) : right })), centered && !!left && (jsx("div", { className: styles.actionsSideSlotContentClone, "aria-hidden": "true", "data-qa": "actions-duplicate-container", inert: 'true', children: left }))] }))] }));
+            [styles.alignTop]: verticalAlign === 'top',
+            [styles.alignCenter]: verticalAlign === 'center',
+            [styles.alignBottom]: verticalAlign === 'bottom',
+        }), children: [(!!left || (!!right && centered)) && (jsx(IconDefaultPropsContext, { props: sideSlotIconProps, children: jsxs("div", { className: styles.actionsLeftSlot, children: [!!left && (jsx(EnvironmentFingerprintNode, { className: styles.actionsSideSlotContent, children: autoMorph && stage !== 'only' ? wrapToMorph(left, false) : wrapToDiv(left) })), centered && !!right && (jsx("div", { className: styles.actionsSideSlotContentClone, "aria-hidden": "true", "data-qa": "actions-duplicate-container", inert: 'true', children: wrapToDiv(right) }))] }) })), (!!children || !left || !right) && (jsx("div", { className: classNames(styles.actionsCenterSlot, { [styles.actionsCenterSlotCentered]: centered }), children: children })), (!!right || (!!left && centered)) && (jsx(IconDefaultPropsContext, { props: sideSlotIconProps, children: jsxs("div", { className: styles.actionsRightSlot, children: [!!right && (jsx(EnvironmentFingerprintNode, { className: styles.actionsSideSlotContent, children: autoMorph && stage !== 'only' ? wrapToMorph(right, true) : wrapToDiv(right) })), centered && !!left && (jsx("div", { className: styles.actionsSideSlotContentClone, "aria-hidden": "true", "data-qa": "actions-duplicate-container", inert: 'true', children: wrapToDiv(left) }))] }) }))] }));
 };
 
 export { Actions };

package/public/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["src/public/Actions.tsx"],"sourcesContent":["import {\n    Children,\n    Fragment,\n    isValidElement,\n    type JSXElementConstructor,\n    type PropsWithChildren,\n    type ReactElement,\n    type FC,\n    type ReactNode,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { isIconElement } from '@hh.ru/magritte-ui-icon';\nimport { EnvironmentFingerprintNode } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { Morph } from '@hh.ru/magritte-ui-nav-bar/public/Morph';\nimport { useAnimationStage } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport interface ActionsProps {\n    /**\n     * Контент левого слота\n     */\n    left?: ReactNode | ReactNode[];\n    /**\n     * Контент правого слота\n     */\n    right?: ReactNode | ReactNode[];\n    /**\n     * Контент центрального слота\n     */\n    children?: ReactNode;\n    /**\n     * Включает центрирование контента центрального слота относительно всего компонента.\n     */\n    centered?: boolean;\n    /**\n     * Управляет автоматическим оборачиванием всего контента в компоненты <Morph />.\n     * По умолчанию включен, но может быть отключен если требуется более сложное описание анимации\n     * чем используется по умолчанию.\n     */\n    autoMorph?: boolean;\n}\n\nconst wrapToMorph = (node: ReactNode | ReactNode[], isRight: boolean) => {\n    const arr =\n        isValidElement(node) && node.type === Fragment\n            ? Children.toArray(\n                  (node as ReactElement<PropsWithChildren, JSXElementConstructor<PropsWithChildren>>).props.children\n              )\n            : Children.toArray(node);\n\n    return arr.map((node, index) => (\n        <Morph\n            className={isIconElement(node) ? styles.actionsIconMorph : ''}\n            id={`actions-component-${isRight ? 'right' : 'left'}-slot-item-${isRight ? arr.length - index : index}`}\n            key={index}\n        >\n            {node}\n        </Morph>\n    ));\n};\n\nexport const Actions: FC<PropsWithChildren<ActionsProps>> = ({\n    children,\n    left,\n    right,\n    centered = false,\n    autoMorph = true,\n}) => {\n    const stage = useAnimationStage();\n    return (\n        <div\n            className={classNames(styles.actionsContainer, {\n                [styles.actionsStartStage]: stage === 'start',\n                [styles.actionsEndStage]: stage === 'end',\n                [styles.actionsOnlyStage]: stage === 'only',\n                [styles.actionsNoChildren]: !children,\n            })}\n        >\n            {(!!left || (!!right && centered)) && (\n                <div className={styles.actionsLeftSlot}>\n                    {!!left && (\n                        <EnvironmentFingerprintNode className={styles.actionsSideSlotContent}>\n                            {autoMorph && stage !== 'only' ? wrapToMorph(left, false) : left}\n                        </EnvironmentFingerprintNode>\n                    )}\n                    {centered && !!right && (\n                        <div\n                            className={styles.actionsSideSlotContentClone}\n                            aria-hidden=\"true\"\n                            data-qa=\"actions-duplicate-container\"\n                            // атрибут не завезли в типы react 18, только с 19го\n                            {...{ inert: 'true' }}\n                        >\n                            {right}\n                        </div>\n                    )}\n                </div>\n            )}\n\n            {(!!children || !left || !right) && (\n                <div className={classNames(styles.actionsCenterSlot, { [styles.actionsCenterSlotCentered]: centered })}>\n                    {children}\n                </div>\n            )}\n\n            {(!!right || (!!left && centered)) && (\n                <div className={styles.actionsRightSlot}>\n                    {!!right && (\n                        <EnvironmentFingerprintNode className={styles.actionsSideSlotContent}>\n                            {autoMorph && stage !== 'only' ? wrapToMorph(right, true) : right}\n                        </EnvironmentFingerprintNode>\n                    )}\n                    {centered && !!left && (\n                        <div\n                            className={styles.actionsSideSlotContentClone}\n                            aria-hidden=\"true\"\n                            data-qa=\"actions-duplicate-container\"\n                            {...{ inert: 'true' }}\n                        >\n                            {left}\n                        </div>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Actions.js","sources":["src/public/Actions.tsx"],"sourcesContent":["import {\n    Children,\n    Fragment,\n    isValidElement,\n    useMemo,\n    type JSXElementConstructor,\n    type PropsWithChildren,\n    type ReactElement,\n    type FC,\n    type ReactNode,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { isIconElement, IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';\nimport type { IconProps } from '@hh.ru/magritte-ui-icon/types';\nimport { EnvironmentFingerprintNode } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { Morph } from '@hh.ru/magritte-ui-nav-bar/public/Morph';\nimport { useAnimationStage } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\nimport { useActionsDefaultProps, useActionsIconsDefaultProps } from '@hh.ru/magritte-ui-nav-bar/public/defaultProps';\n\nimport styles from './nav-bar.less';\n\nexport interface ActionsProps {\n    /**\n     * Контент левого слота\n     */\n    left?: ReactNode | ReactNode[];\n    /**\n     * Контент правого слота\n     */\n    right?: ReactNode | ReactNode[];\n    /**\n     * Контент центрального слота\n     */\n    children?: ReactNode;\n    /**\n     * Включает центрирование контента центрального слота относительно всего компонента.\n     * @default false\n     */\n    centered?: boolean;\n    /**\n     * Управляет автоматическим оборачиванием всего контента в компоненты <Morph />.\n     * По умолчанию включен, но может быть отключен если требуется более сложное описание анимации\n     * чем используется по умолчанию.\n     * @default true\n     */\n    autoMorph?: boolean;\n    /**\n     * @default center\n     */\n    verticalAlign?: 'top' | 'center' | 'bottom';\n}\n\nconst isFragmentElement = (\n    node: ReactNode\n): node is ReactElement<PropsWithChildren, JSXElementConstructor<PropsWithChildren>> =>\n    isValidElement(node) && node.type === Fragment;\n/**\n * Базовые дефолтные пропсы иконок в боковых слотах `Actions`. Через `NavBarDefaultPropsContext`\n * (ключ `actionsIcons`) их можно переопределить; на иконки центрального слота не распространяются.\n */\nconst SIDE_SLOT_ICON_DEFAULT_PROPS: Partial<IconProps> = {\n    padding: 8,\n    initialColor: 'primary',\n    backgroundStyle: 'overlay-action',\n    borderRadius: 'halfHeight',\n};\n\nconst wrapToMorph = (node: ReactNode | ReactNode[], isRight: boolean) => {\n    const arr = isFragmentElement(node) ? Children.toArray(node.props.children) : Children.toArray(node);\n\n    return arr.map((node, index) => (\n        <Morph\n            className={isIconElement(node) ? styles.actionsIconMorph : ''}\n            id={`actions-component-${isRight ? 'right' : 'left'}-slot-item-${isRight ? arr.length - index : index}`}\n            key={index}\n        >\n            {node}\n        </Morph>\n    ));\n};\n\nconst wrapToDiv = (node: ReactNode | ReactNode[]) => {\n    const arr = isFragmentElement(node) ? Children.toArray(node.props.children) : Children.toArray(node);\n\n    return arr.map((node, index) => (\n        <div className={isIconElement(node) ? styles.actionsIconMorph : ''} key={index}>\n            {node}\n        </div>\n    ));\n};\n\nexport const Actions: FC<PropsWithChildren<ActionsProps>> = (props) => {\n    const defaultProps = useActionsDefaultProps();\n    const {\n        children,\n        left,\n        right,\n        centered = false,\n        autoMorph = true,\n        verticalAlign = 'center',\n    } = { ...defaultProps, ...props };\n    const actionsIconsOverride = useActionsIconsDefaultProps();\n    const sideSlotIconProps = useMemo(\n        // Каст: спред union-типа `IconProps` (ветки styled/hexed с взаимоисключающими `initialColor`/`hex`)\n        // TS не сводит обратно к `Partial<IconProps>`, хотя мёрж семантически корректен.\n        () => ({ ...SIDE_SLOT_ICON_DEFAULT_PROPS, ...actionsIconsOverride }) as Partial<IconProps>,\n        [actionsIconsOverride]\n    );\n    const stage = useAnimationStage();\n    return (\n        <div\n            className={classNames(styles.actionsContainer, {\n                [styles.actionsStartStage]: stage === 'start',\n                [styles.actionsEndStage]: stage === 'end',\n                [styles.actionsOnlyStage]: stage === 'only',\n                [styles.actionsNoChildren]: !children,\n                [styles.alignTop]: verticalAlign === 'top',\n                [styles.alignCenter]: verticalAlign === 'center',\n                [styles.alignBottom]: verticalAlign === 'bottom',\n            })}\n        >\n            {(!!left || (!!right && centered)) && (\n                <IconDefaultPropsContext props={sideSlotIconProps}>\n                    <div className={styles.actionsLeftSlot}>\n                        {!!left && (\n                            <EnvironmentFingerprintNode className={styles.actionsSideSlotContent}>\n                                {autoMorph && stage !== 'only' ? wrapToMorph(left, false) : wrapToDiv(left)}\n                            </EnvironmentFingerprintNode>\n                        )}\n                        {centered && !!right && (\n                            <div\n                                className={styles.actionsSideSlotContentClone}\n                                aria-hidden=\"true\"\n                                data-qa=\"actions-duplicate-container\"\n                                // атрибут не завезли в типы react 18, только с 19го\n                                {...{ inert: 'true' }}\n                            >\n                                {wrapToDiv(right)}\n                            </div>\n                        )}\n                    </div>\n                </IconDefaultPropsContext>\n            )}\n\n            {(!!children || !left || !right) && (\n                <div className={classNames(styles.actionsCenterSlot, { [styles.actionsCenterSlotCentered]: centered })}>\n                    {children}\n                </div>\n            )}\n\n            {(!!right || (!!left && centered)) && (\n                <IconDefaultPropsContext props={sideSlotIconProps}>\n                    <div className={styles.actionsRightSlot}>\n                        {!!right && (\n                            <EnvironmentFingerprintNode className={styles.actionsSideSlotContent}>\n                                {autoMorph && stage !== 'only' ? wrapToMorph(right, true) : wrapToDiv(right)}\n                            </EnvironmentFingerprintNode>\n                        )}\n                        {centered && !!left && (\n                            <div\n                                className={styles.actionsSideSlotContentClone}\n                                aria-hidden=\"true\"\n                                data-qa=\"actions-duplicate-container\"\n                                {...{ inert: 'true' }}\n                            >\n                                {wrapToDiv(left)}\n                            </div>\n                        )}\n                    </div>\n                </IconDefaultPropsContext>\n            )}\n        </div>\n    );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/public/LayoutMorph.js

@@ -10,21 +10,12 @@ import { usePaneStore } from '../internal/PaneStore.js';
 import { useInert } from '../internal/useInert.js';
 import { useActualRef, useStoreSyncedTransform, lerp, calcMorphParams } from '../internal/utils.js';
 import { AnimationStageContext } from './LayoutStage.js';
-import { s as styles } from '../NavBar-Cp0mcX9W.js';
+import { s as styles } from '../nav-bar-CmjjkPy6.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
+import '../internal/NavBarContext.js';
 import '@hh.ru/magritte-common-use-when-font-loaded';
 import './EnvironmentFingerprintNode.js';
-import '@hh.ru/magritte-ui-divider';
-import '@hh.ru/magritte-ui-layer';
-import '../internal/useAnimationRanges.js';
-import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useNavBarMetrics.js';
-import '../internal/useResetFocus.js';
-import '../internal/useScrollAdapter.js';
-import '@hh.ru/magritte-internal-custom-scroll';
-import '../internal/useSnapScroll.js';
-import '../internal/useSyncMotionValue.js';
 
 const startKey = (id) => `${id}-start`;
 const endKey = (id) => `${id}-end`;

package/public/LayoutMorph.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutMorph.js","sources":["src/public/LayoutMorph.tsx"],"sourcesContent":["import {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useRef,\n    type FC,\n    type MutableRefObject,\n    type PropsWithChildren,\n} from 'react';\nimport classNames from 'classnames';\nimport { type HTMLMotionProps, motion, useMotionValue } from 'motion/react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useMeasureManual } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useInert } from '@hh.ru/magritte-ui-nav-bar/internal/useInert';\nimport {\n    lerp,\n    useActualRef,\n    useStoreSyncedTransform,\n    calcMorphParams,\n    type MorphSetup,\n    type HorizontalAlign,\n    type SizeAxis,\n    type VerticalAlign,\n} from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { AnimationStageContext } from '@hh.ru/magritte-ui-nav-bar/public/LayoutStage';\n\nimport styles from './nav-bar.less';\n\nconst startKey = (id: string) => `${id}-start`;\nconst endKey = (id: string) => `${id}-end`;\n\nconst LayoutMorphContext = createContext<string>('#container');\nconst useLayoutMorphContext = () => useContext(LayoutMorphContext);\n\nconst calcParams = (\n    setup: MorphSetup,\n    sizeAxis: SizeAxis,\n    horizontalPositionAlign: HorizontalAlign,\n    verticalPositionAlign: VerticalAlign\n) => {\n    const start = DOMRect.fromRect(setup.start);\n    start.x -= setup.containerStart.x;\n    start.y -= setup.containerStart.y;\n\n    const end = DOMRect.fromRect(setup.end);\n    end.x -= setup.containerEnd.x;\n    end.y -= setup.containerEnd.y;\n\n    return calcMorphParams(start, end, sizeAxis, horizontalPositionAlign, verticalPositionAlign);\n};\n\nexport type LayoutMorphProps = PropsWithChildren<\n    {\n        /**\n         * Задает стадию анимации на которой элемент будет виден.\n         * Если не задан, то элемент будет виден на протяжении всей анимации.\n         */\n        stage?: 'start' | 'end';\n        /**\n         * Позволяет анимировать элементы через морфинг, задав между ними связь с помощью указания одинакового `id`\n         * и разных `stage`\n         */\n        id?: string;\n        /**\n         * Задает ось на основе которой будет вычисляться коэффициент масштабирования применяемый в ходе анимации.\n         * В режиме `both` для каждой из осей применяется свой коэффициент что может привести к искажению пропорций в ходе\n         * анимации.\n         * В режиме `auto` применяется эвристика для выбора одного из трех остальных режимов для получения наилучшего\n         * результат и минимизации искажения пропорций.\n         */\n        sizeAxis?: SizeAxis;\n        /**\n         * Задает горизонтальное выравнивание анимируемых элементов в ходе анимации.\n         */\n        horizontalPositionAlign?: HorizontalAlign;\n        /**\n         * Задает вертикальное выравнивание анимируемых элементов в ходе анимации.\n         */\n        verticalPositionAlign?: VerticalAlign;\n    } & HTMLMotionProps<'div'>\n>;\n\nexport const LayoutMorph: FC<LayoutMorphProps> = ({\n    children,\n    stage,\n    id: manualId,\n    sizeAxis = 'auto',\n    verticalPositionAlign = 'center',\n    horizontalPositionAlign = 'center',\n    ...rest\n}) => {\n    const id = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const animationStageRef = useContext(AnimationStageContext);\n    const morphStore = useMorphStore();\n    const paneStore = usePaneStore();\n\n    const width = useMotionValue<'auto' | number>('auto');\n    const height = useMotionValue<'auto' | number>('auto');\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n    const scaleX = useMotionValue(1);\n    const scaleY = useMotionValue(1);\n    const opacity = useMotionValue(stage !== 'end' ? 1 : 0);\n    const pointerEvents = useMotionValue<'auto' | 'none'>('auto');\n    const [refCb, setInert] = useInert();\n    const rootRefCallback = useMultipleRefs<HTMLElement>(rootRef, refCb);\n\n    const childRef: MutableRefObject<HTMLElement | null> = useRef(null);\n\n    const containerId = useLayoutMorphContext();\n\n    useLayoutEffect(() => {\n        if (!rootRef.current || !rootRef.current.firstChild) {\n            return;\n        }\n        if (rootRef.current.children.length > 1) {\n            throw new Error(\n                'LayoutMorph expects exactly one child HTML element. Please wrap multiple children in a container.'\n            );\n        }\n        childRef.current = rootRef.current.firstChild as HTMLElement;\n    }, []);\n\n    const isManual = !!manualId && !!stage;\n\n    const actualIdRef = useActualRef(isManual ? manualId : id);\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        morphStore,\n        [startKey(id), endKey(id), startKey(containerId), endKey(containerId)],\n        () => {\n            const basicRect = new DOMRectReadOnly();\n            const sk = stage === 'end' ? endKey : startKey;\n            const ek = stage === 'end' ? startKey : endKey;\n            const setup = {\n                start: morphStore.get(sk(actualIdRef.current)) ?? basicRect,\n                end: morphStore.get(ek(actualIdRef.current)) ?? basicRect,\n                containerStart: morphStore.get(sk(containerId)) ?? basicRect,\n                containerEnd: morphStore.get(ek(containerId)) ?? basicRect,\n            };\n\n            const params = calcParams(\n                setup,\n                isManual ? sizeAxis : 'both',\n                isManual ? horizontalPositionAlign : 'left',\n                isManual ? verticalPositionAlign : 'top'\n            );\n            const startX = setup.start.x - setup.containerStart.x;\n            const startY = setup.start.y - setup.containerStart.y;\n\n            if (isManual) {\n                width.set(setup.start.width);\n                height.set(setup.start.height);\n                return (progress: number) => {\n                    const p = stage === 'end' ? 1 - progress : progress;\n                    x.set(lerp(startX, startX + params.deltaX, p));\n                    y.set(lerp(startY, startY + params.deltaY, p));\n                    scaleX.set(lerp(1, params.scaleX, p));\n                    scaleY.set(lerp(1, params.scaleY, p));\n                    pointerEvents.set(!stage || p < 0.5 ? 'auto' : 'none');\n                    setInert(pointerEvents.get() === 'none');\n                    stage && opacity.set(1 - p);\n                };\n            }\n\n            scaleX.set(1);\n            scaleY.set(1);\n            return (progress: number) => {\n                const p = stage === 'end' ? 1 - progress : progress;\n                x.set(lerp(startX, startX + params.deltaX, p));\n                y.set(lerp(startY, startY + params.deltaY, p));\n                width.set(lerp(setup.start.width, setup.start.width * params.scaleX, p));\n                height.set(lerp(setup.start.height, setup.start.height * params.scaleY, p));\n                pointerEvents.set(!stage || p < 0.5 ? 'auto' : 'none');\n                setInert(pointerEvents.get() === 'none');\n                stage && opacity.set(1 - p);\n            };\n        },\n        (interpolator, progress) => interpolator(progress)\n    );\n\n    useMeasureManual(childRef, (rect) => {\n        if (animationStageRef.current === 'start') {\n            (stage === 'start' || !stage) && morphStore.set(startKey(actualIdRef.current), rect);\n            // если элемент виден только в начальной или конечной точке анимации, то его позиция и размер\n            // не меняются в процессе анимации, только прозрачность\n            stage === 'start' && morphStore.set(endKey(actualIdRef.current), rect);\n        } else if (animationStageRef.current === 'end') {\n            (stage === 'end' || !stage) && morphStore.set(endKey(actualIdRef.current), rect);\n            if ((!isManual || morphStore.get(startKey(actualIdRef.current)) === null) && stage === 'end') {\n                morphStore.set(startKey(actualIdRef.current), rect);\n            }\n        }\n    });\n\n    return (\n        <motion.div\n            {...rest}\n            ref={rootRefCallback}\n            className={classNames(styles.layoutMorph, {\n                [styles.layoutMorphStart]: stage === 'start',\n                [styles.layoutMorphEnd]: stage === 'end',\n                [styles.morphItemTop]: verticalPositionAlign === 'top' && isManual,\n                [styles.morphItemBottom]: verticalPositionAlign === 'bottom' && isManual,\n                [styles.morphItemLeft]: horizontalPositionAlign === 'left' && isManual,\n                [styles.morphItemRight]: horizontalPositionAlign === 'right' && isManual,\n            })}\n            style={{ width, height, x, y, scaleX, scaleY, opacity, pointerEvents }}\n        >\n            <LayoutMorphContext.Provider value={id}>{children}</LayoutMorphContext.Provider>\n        </motion.div>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"LayoutMorph.js","sources":["src/public/LayoutMorph.tsx"],"sourcesContent":["import {\n    createContext,\n    useContext,\n    useId,\n    useLayoutEffect,\n    useRef,\n    type FC,\n    type MutableRefObject,\n    type PropsWithChildren,\n} from 'react';\nimport classNames from 'classnames';\nimport { type HTMLMotionProps, motion, useMotionValue } from 'motion/react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useMeasureManual } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useInert } from '@hh.ru/magritte-ui-nav-bar/internal/useInert';\nimport {\n    lerp,\n    useActualRef,\n    useStoreSyncedTransform,\n    calcMorphParams,\n    type MorphSetup,\n    type HorizontalAlign,\n    type SizeAxis,\n    type VerticalAlign,\n} from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { AnimationStageContext } from '@hh.ru/magritte-ui-nav-bar/public/LayoutStage';\n\nimport styles from './nav-bar.less';\n\nconst startKey = (id: string) => `${id}-start`;\nconst endKey = (id: string) => `${id}-end`;\n\nconst LayoutMorphContext = createContext<string>('#container');\nconst useLayoutMorphContext = () => useContext(LayoutMorphContext);\n\nconst calcParams = (\n    setup: MorphSetup,\n    sizeAxis: SizeAxis,\n    horizontalPositionAlign: HorizontalAlign,\n    verticalPositionAlign: VerticalAlign\n) => {\n    const start = DOMRect.fromRect(setup.start);\n    start.x -= setup.containerStart.x;\n    start.y -= setup.containerStart.y;\n\n    const end = DOMRect.fromRect(setup.end);\n    end.x -= setup.containerEnd.x;\n    end.y -= setup.containerEnd.y;\n\n    return calcMorphParams(start, end, sizeAxis, horizontalPositionAlign, verticalPositionAlign);\n};\n\nexport type LayoutMorphProps = PropsWithChildren<\n    {\n        /**\n         * Задает стадию анимации на которой элемент будет виден.\n         * Если не задан, то элемент будет виден на протяжении всей анимации.\n         */\n        stage?: 'start' | 'end';\n        /**\n         * Позволяет анимировать элементы через морфинг, задав между ними связь с помощью указания одинакового `id`\n         * и разных `stage`\n         */\n        id?: string;\n        /**\n         * Задает ось на основе которой будет вычисляться коэффициент масштабирования применяемый в ходе анимации.\n         * В режиме `both` для каждой из осей применяется свой коэффициент что может привести к искажению пропорций в ходе\n         * анимации.\n         * В режиме `auto` применяется эвристика для выбора одного из трех остальных режимов для получения наилучшего\n         * результат и минимизации искажения пропорций.\n         */\n        sizeAxis?: SizeAxis;\n        /**\n         * Задает горизонтальное выравнивание анимируемых элементов в ходе анимации.\n         */\n        horizontalPositionAlign?: HorizontalAlign;\n        /**\n         * Задает вертикальное выравнивание анимируемых элементов в ходе анимации.\n         */\n        verticalPositionAlign?: VerticalAlign;\n    } & HTMLMotionProps<'div'>\n>;\n\nexport const LayoutMorph: FC<LayoutMorphProps> = ({\n    children,\n    stage,\n    id: manualId,\n    sizeAxis = 'auto',\n    verticalPositionAlign = 'center',\n    horizontalPositionAlign = 'center',\n    ...rest\n}) => {\n    const id = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const animationStageRef = useContext(AnimationStageContext);\n    const morphStore = useMorphStore();\n    const paneStore = usePaneStore();\n\n    const width = useMotionValue<'auto' | number>('auto');\n    const height = useMotionValue<'auto' | number>('auto');\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n    const scaleX = useMotionValue(1);\n    const scaleY = useMotionValue(1);\n    const opacity = useMotionValue(stage !== 'end' ? 1 : 0);\n    const pointerEvents = useMotionValue<'auto' | 'none'>('auto');\n    const [refCb, setInert] = useInert();\n    const rootRefCallback = useMultipleRefs<HTMLElement>(rootRef, refCb);\n\n    const childRef: MutableRefObject<HTMLElement | null> = useRef(null);\n\n    const containerId = useLayoutMorphContext();\n\n    useLayoutEffect(() => {\n        if (!rootRef.current || !rootRef.current.firstChild) {\n            return;\n        }\n        if (rootRef.current.children.length > 1) {\n            throw new Error(\n                'LayoutMorph expects exactly one child HTML element. Please wrap multiple children in a container.'\n            );\n        }\n        childRef.current = rootRef.current.firstChild as HTMLElement;\n    }, []);\n\n    const isManual = !!manualId && !!stage;\n\n    const actualIdRef = useActualRef(isManual ? manualId : id);\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        morphStore,\n        [startKey(id), endKey(id), startKey(containerId), endKey(containerId)],\n        () => {\n            const basicRect = new DOMRectReadOnly();\n            const sk = stage === 'end' ? endKey : startKey;\n            const ek = stage === 'end' ? startKey : endKey;\n            const setup = {\n                start: morphStore.get(sk(actualIdRef.current)) ?? basicRect,\n                end: morphStore.get(ek(actualIdRef.current)) ?? basicRect,\n                containerStart: morphStore.get(sk(containerId)) ?? basicRect,\n                containerEnd: morphStore.get(ek(containerId)) ?? basicRect,\n            };\n\n            const params = calcParams(\n                setup,\n                isManual ? sizeAxis : 'both',\n                isManual ? horizontalPositionAlign : 'left',\n                isManual ? verticalPositionAlign : 'top'\n            );\n            const startX = setup.start.x - setup.containerStart.x;\n            const startY = setup.start.y - setup.containerStart.y;\n\n            if (isManual) {\n                width.set(setup.start.width);\n                height.set(setup.start.height);\n                return (progress: number) => {\n                    const p = stage === 'end' ? 1 - progress : progress;\n                    x.set(lerp(startX, startX + params.deltaX, p));\n                    y.set(lerp(startY, startY + params.deltaY, p));\n                    scaleX.set(lerp(1, params.scaleX, p));\n                    scaleY.set(lerp(1, params.scaleY, p));\n                    pointerEvents.set(!stage || p < 0.5 ? 'auto' : 'none');\n                    setInert(pointerEvents.get() === 'none');\n                    stage && opacity.set(1 - p);\n                };\n            }\n\n            scaleX.set(1);\n            scaleY.set(1);\n            return (progress: number) => {\n                const p = stage === 'end' ? 1 - progress : progress;\n                x.set(lerp(startX, startX + params.deltaX, p));\n                y.set(lerp(startY, startY + params.deltaY, p));\n                width.set(lerp(setup.start.width, setup.start.width * params.scaleX, p));\n                height.set(lerp(setup.start.height, setup.start.height * params.scaleY, p));\n                pointerEvents.set(!stage || p < 0.5 ? 'auto' : 'none');\n                setInert(pointerEvents.get() === 'none');\n                stage && opacity.set(1 - p);\n            };\n        },\n        (interpolator, progress) => interpolator(progress)\n    );\n\n    useMeasureManual(childRef, (rect) => {\n        if (animationStageRef.current === 'start') {\n            (stage === 'start' || !stage) && morphStore.set(startKey(actualIdRef.current), rect);\n            // если элемент виден только в начальной или конечной точке анимации, то его позиция и размер\n            // не меняются в процессе анимации, только прозрачность\n            stage === 'start' && morphStore.set(endKey(actualIdRef.current), rect);\n        } else if (animationStageRef.current === 'end') {\n            (stage === 'end' || !stage) && morphStore.set(endKey(actualIdRef.current), rect);\n            if ((!isManual || morphStore.get(startKey(actualIdRef.current)) === null) && stage === 'end') {\n                morphStore.set(startKey(actualIdRef.current), rect);\n            }\n        }\n    });\n\n    return (\n        <motion.div\n            {...rest}\n            ref={rootRefCallback}\n            className={classNames(styles.layoutMorph, {\n                [styles.layoutMorphStart]: stage === 'start',\n                [styles.layoutMorphEnd]: stage === 'end',\n                [styles.morphItemTop]: verticalPositionAlign === 'top' && isManual,\n                [styles.morphItemBottom]: verticalPositionAlign === 'bottom' && isManual,\n                [styles.morphItemLeft]: horizontalPositionAlign === 'left' && isManual,\n                [styles.morphItemRight]: horizontalPositionAlign === 'right' && isManual,\n            })}\n            style={{ width, height, x, y, scaleX, scaleY, opacity, pointerEvents }}\n        >\n            <LayoutMorphContext.Provider value={id}>{children}</LayoutMorphContext.Provider>\n        </motion.div>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/public/LayoutStage.js

@@ -9,19 +9,10 @@ import { MorphStoreProvider, useMorphStore } from '../internal/MorphStore.js';
 import { usePaneStore } from '../internal/PaneStore.js';
 import { useInitOnce } from '../internal/utils.js';
 import { EnvironmentFingerprintNode, useEnvironmentFingerprint } from './EnvironmentFingerprintNode.js';
-import { s as styles } from '../NavBar-Cp0mcX9W.js';
+import { s as styles } from '../nav-bar-CmjjkPy6.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
-import '@hh.ru/magritte-ui-divider';
-import '@hh.ru/magritte-ui-layer';
-import '../internal/useAnimationRanges.js';
-import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useNavBarMetrics.js';
-import '../internal/useResetFocus.js';
-import '../internal/useScrollAdapter.js';
-import '@hh.ru/magritte-internal-custom-scroll';
-import '../internal/useSnapScroll.js';
-import '../internal/useSyncMotionValue.js';
+import '../internal/NavBarContext.js';
 
 const CONTAINER_START_KEY = '#container-start';
 const CONTAINER_END_KEY = '#container-end';

package/public/LayoutStage.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutStage.js","sources":["src/public/LayoutStage.tsx"],"sourcesContent":["import {\n    createContext,\n    createRef,\n    useContext,\n    useLayoutEffect,\n    useRef,\n    type FC,\n    type MutableRefObject,\n    type PropsWithChildren,\n} from 'react';\nimport classNames from 'classnames';\nimport { HTMLMotionProps, motion, useMotionValue, frame } from 'motion/react';\n\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport {\n    MetricsProvider,\n    useMeasureManual,\n    useRemeasureAllManual,\n} from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { MorphStoreProvider, useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport {\n    EnvironmentFingerprintNode,\n    useEnvironmentFingerprint,\n} from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\n\nimport styles from './nav-bar.less';\n\nexport const CONTAINER_START_KEY = '#container-start';\nexport const CONTAINER_END_KEY = '#container-end';\n\nexport type AnimationStage = 'start' | 'end' | 'progress';\n\nexport const AnimationStageContext = createContext<MutableRefObject<AnimationStage | null>>(createRef());\n\nconst stageClasses = {\n    start: 'nav-bar-layout-animation-stage-start',\n    end: 'nav-bar-layout-animation-stage-end',\n    progress: styles.animationStageProgress,\n} as const;\n\nconst CombinedStageAnimationMeasurementManager: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({\n    children,\n    ...rest\n}) => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const animationStageRef = useContext(AnimationStageContext);\n    const morphStore = useMorphStore();\n    const currentClassRef = useRef<string>(stageClasses.start);\n    const paneStore = usePaneStore();\n    const forceMeasure = useRemeasureAllManual();\n    const progressPainted = useRef(false);\n\n    const setStage = useInitOnce(() => (stage: AnimationStage) => {\n        const setClasses = (stage: AnimationStage) => {\n            if (!wrapperRef.current) {\n                return;\n            }\n            for (const animClasses of Object.entries(stageClasses)) {\n                wrapperRef.current.classList.toggle(animClasses[1], stage === animClasses[0]);\n            }\n            currentClassRef.current = stageClasses[stage];\n            animationStageRef.current = stage;\n        };\n\n        if (stage === 'progress' && !progressPainted.current) {\n            setClasses('start');\n            frame.render(() => {\n                progressPainted.current = true;\n                setClasses('progress');\n            });\n            return;\n        }\n\n        setClasses(stage);\n    });\n    const measureSubtree = useInitOnce(() => () => {\n        setStage('start');\n        forceMeasure();\n        setStage('end');\n        forceMeasure();\n        setStage('progress');\n    });\n\n    const height = useMotionValue<number | 'auto'>('auto');\n    useLayoutEffect(() => {\n        paneStore.set({ animated: true });\n        return () => paneStore.set({ animated: false });\n    }, [paneStore]);\n\n    useMeasureManual(wrapperRef, (rect) => {\n        if (animationStageRef.current === 'start') {\n            height.set(rect.height);\n            // height из MotionValue применится к DOM асинхронно, поэтому применяем высоту синхронно\n            // чтобы не триггерить ResizeObserver когда сбросим у элементов position в absolute\n            if (wrapperRef.current) {\n                wrapperRef.current.style.height = `${rect.height}px`;\n            }\n            paneStore.set({ top: rect.top, startHeight: rect.height });\n            morphStore.set(CONTAINER_START_KEY, rect);\n        } else {\n            paneStore.set({ endHeight: rect.height });\n            morphStore.set(CONTAINER_END_KEY, rect);\n        }\n    });\n\n    useEnvironmentFingerprint(measureSubtree);\n    useWhenFontLoaded(() => height.get() !== 'auto' && measureSubtree());\n\n    return (\n        <motion.div\n            ref={wrapperRef}\n            {...rest}\n            className={classNames(styles.layoutAnimationContainer, currentClassRef.current)}\n            style={{ height }}\n        >\n            {children}\n        </motion.div>\n    );\n};\n\nexport const LayoutStage: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({ children, ...rest }) => {\n    const stageRef = useRef<AnimationStage | null>('start');\n\n    return (\n        <EnvironmentFingerprintNode style={{ pointerEvents: 'none' }}>\n            <MorphStoreProvider>\n                <AnimationStageContext.Provider value={stageRef}>\n                    <MetricsProvider>\n                        <CombinedStageAnimationMeasurementManager {...rest}>\n                            {children}\n                        </CombinedStageAnimationMeasurementManager>\n                    </MetricsProvider>\n                </AnimationStageContext.Provider>\n            </MorphStoreProvider>\n        </EnvironmentFingerprintNode>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"LayoutStage.js","sources":["src/public/LayoutStage.tsx"],"sourcesContent":["import {\n    createContext,\n    createRef,\n    useContext,\n    useLayoutEffect,\n    useRef,\n    type FC,\n    type MutableRefObject,\n    type PropsWithChildren,\n} from 'react';\nimport classNames from 'classnames';\nimport { HTMLMotionProps, motion, useMotionValue, frame } from 'motion/react';\n\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport {\n    MetricsProvider,\n    useMeasureManual,\n    useRemeasureAllManual,\n} from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { MorphStoreProvider, useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport { useInitOnce } from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport {\n    EnvironmentFingerprintNode,\n    useEnvironmentFingerprint,\n} from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\n\nimport styles from './nav-bar.less';\n\nexport const CONTAINER_START_KEY = '#container-start';\nexport const CONTAINER_END_KEY = '#container-end';\n\nexport type AnimationStage = 'start' | 'end' | 'progress';\n\nexport const AnimationStageContext = createContext<MutableRefObject<AnimationStage | null>>(createRef());\n\nconst stageClasses = {\n    start: 'nav-bar-layout-animation-stage-start',\n    end: 'nav-bar-layout-animation-stage-end',\n    progress: styles.animationStageProgress,\n} as const;\n\nconst CombinedStageAnimationMeasurementManager: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({\n    children,\n    ...rest\n}) => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const animationStageRef = useContext(AnimationStageContext);\n    const morphStore = useMorphStore();\n    const currentClassRef = useRef<string>(stageClasses.start);\n    const paneStore = usePaneStore();\n    const forceMeasure = useRemeasureAllManual();\n    const progressPainted = useRef(false);\n\n    const setStage = useInitOnce(() => (stage: AnimationStage) => {\n        const setClasses = (stage: AnimationStage) => {\n            if (!wrapperRef.current) {\n                return;\n            }\n            for (const animClasses of Object.entries(stageClasses)) {\n                wrapperRef.current.classList.toggle(animClasses[1], stage === animClasses[0]);\n            }\n            currentClassRef.current = stageClasses[stage];\n            animationStageRef.current = stage;\n        };\n\n        if (stage === 'progress' && !progressPainted.current) {\n            setClasses('start');\n            frame.render(() => {\n                progressPainted.current = true;\n                setClasses('progress');\n            });\n            return;\n        }\n\n        setClasses(stage);\n    });\n    const measureSubtree = useInitOnce(() => () => {\n        setStage('start');\n        forceMeasure();\n        setStage('end');\n        forceMeasure();\n        setStage('progress');\n    });\n\n    const height = useMotionValue<number | 'auto'>('auto');\n    useLayoutEffect(() => {\n        paneStore.set({ animated: true });\n        return () => paneStore.set({ animated: false });\n    }, [paneStore]);\n\n    useMeasureManual(wrapperRef, (rect) => {\n        if (animationStageRef.current === 'start') {\n            height.set(rect.height);\n            // height из MotionValue применится к DOM асинхронно, поэтому применяем высоту синхронно\n            // чтобы не триггерить ResizeObserver когда сбросим у элементов position в absolute\n            if (wrapperRef.current) {\n                wrapperRef.current.style.height = `${rect.height}px`;\n            }\n            paneStore.set({ top: rect.top, startHeight: rect.height });\n            morphStore.set(CONTAINER_START_KEY, rect);\n        } else {\n            paneStore.set({ endHeight: rect.height });\n            morphStore.set(CONTAINER_END_KEY, rect);\n        }\n    });\n\n    useEnvironmentFingerprint(measureSubtree);\n    useWhenFontLoaded(() => height.get() !== 'auto' && measureSubtree());\n\n    return (\n        <motion.div\n            ref={wrapperRef}\n            {...rest}\n            className={classNames(styles.layoutAnimationContainer, currentClassRef.current)}\n            style={{ height }}\n        >\n            {children}\n        </motion.div>\n    );\n};\n\nexport const LayoutStage: FC<PropsWithChildren<HTMLMotionProps<'div'>>> = ({ children, ...rest }) => {\n    const stageRef = useRef<AnimationStage | null>('start');\n\n    return (\n        <EnvironmentFingerprintNode style={{ pointerEvents: 'none' }}>\n            <MorphStoreProvider>\n                <AnimationStageContext.Provider value={stageRef}>\n                    <MetricsProvider>\n                        <CombinedStageAnimationMeasurementManager {...rest}>\n                            {children}\n                        </CombinedStageAnimationMeasurementManager>\n                    </MetricsProvider>\n                </AnimationStageContext.Provider>\n            </MorphStoreProvider>\n        </EnvironmentFingerprintNode>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/public/Morph.js

@@ -9,20 +9,11 @@ import { usePaneStore } from '../internal/PaneStore.js';
 import { useStoreSyncedTransform, calcMorphParams, lerp } from '../internal/utils.js';
 import { useEnvironmentFingerprint } from './EnvironmentFingerprintNode.js';
 import { useAnimationStage } from './Stage.js';
-import { s as styles } from '../NavBar-Cp0mcX9W.js';
+import { s as styles } from '../nav-bar-CmjjkPy6.js';
 import '../internal/KeyedSubscriptions.js';
 import 'motion';
+import '../internal/NavBarContext.js';
 import '../internal/useInert.js';
-import '@hh.ru/magritte-ui-divider';
-import '@hh.ru/magritte-ui-layer';
-import '../internal/useAnimationRanges.js';
-import '../internal/useBindScrollToAnimationProgress.js';
-import '../internal/useNavBarMetrics.js';
-import '../internal/useResetFocus.js';
-import '../internal/useScrollAdapter.js';
-import '@hh.ru/magritte-internal-custom-scroll';
-import '../internal/useSnapScroll.js';
-import '../internal/useSyncMotionValue.js';
 
 const Morph = ({ children, id, className, style, sizeAxis = 'auto', horizontalPositionAlign = 'center', verticalPositionAlign = 'center', ...rest }) => {
     const paneStore = usePaneStore();

package/public/Morph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Morph.js","sources":["src/public/Morph.tsx"],"sourcesContent":["import { type PropsWithChildren, type FC, useLayoutEffect, useRef, type CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { useMotionValue, motion, HTMLMotionProps } from 'motion/react';\n\nimport { useMeasureAuto } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport {\n    lerp,\n    useStoreSyncedTransform,\n    calcMorphParams,\n    type HorizontalAlign,\n    type SizeAxis,\n    type VerticalAlign,\n} from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { useEnvironmentFingerprint } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { useAnimationStage } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport interface MorphProps extends HTMLMotionProps<'div'> {\n    /**\n     * Задает соответствие между элементами для морфинга между начальным и конечным <Stage />\n     */\n    id: string;\n    style?: CSSProperties;\n    className?: string;\n    /**\n     * Задает ось на основе которой будет вычисляться коэффициент масштабирования применяемый в ходе анимации.\n     * В режиме `both` для каждой из осей применяется свой коэффициент что может привести к искажению пропорций в ходе\n     * анимации.\n     * В режиме `auto` применяется эвристика для выбора одного из трех остальных режимов для получения наилучшего\n     * результат и минимизации искажения пропорций.\n     */\n    sizeAxis?: SizeAxis;\n    /**\n     * Задает горизонтальное выравнивание анимируемых элементов в ходе анимации.\n     */\n    horizontalPositionAlign?: HorizontalAlign;\n    /**\n     * Задает вертикальное выравнивание анимируемых элементов в ходе анимации.\n     */\n    verticalPositionAlign?: VerticalAlign;\n}\n\nexport const Morph: FC<PropsWithChildren<MorphProps>> = ({\n    children,\n    id,\n    className,\n    style,\n    sizeAxis = 'auto',\n    horizontalPositionAlign = 'center',\n    verticalPositionAlign = 'center',\n    ...rest\n}) => {\n    const paneStore = usePaneStore();\n    const morphStore = useMorphStore();\n    const animationStage = useAnimationStage();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n    const scaleX = useMotionValue(1);\n    const scaleY = useMotionValue(1);\n\n    const startId = `start-${id}`;\n    const endId = `end-${id}`;\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        morphStore,\n        [startId, endId],\n        () => {\n            const start = morphStore.get(animationStage === 'end' ? endId : startId);\n            const end = morphStore.get(animationStage === 'end' ? startId : endId);\n            const {\n                deltaX,\n                deltaY,\n                scaleX: xScale,\n                scaleY: yScale,\n            } = calcMorphParams(start, end, sizeAxis, horizontalPositionAlign, verticalPositionAlign);\n\n            return (progress: number) => {\n                const p = animationStage === 'end' ? 1 - progress : progress;\n                x.set(lerp(0, deltaX, p));\n                y.set(lerp(0, deltaY, p));\n\n                scaleX.set(lerp(1, xScale, p));\n                scaleY.set(lerp(1, yScale, p));\n            };\n        },\n        (interpolator, progress) => interpolator(progress)\n    );\n\n    const forceInvalidate = useMeasureAuto(rootRef, (rect) => morphStore.set(`${animationStage}-${id}`, rect), [\n        id,\n        animationStage,\n    ]);\n\n    useEnvironmentFingerprint(forceInvalidate);\n\n    useLayoutEffect(() => () => morphStore.set(`${animationStage}-${id}`, null), [morphStore, animationStage, id]);\n\n    return (\n        <motion.div\n            ref={rootRef}\n            {...rest}\n            className={classNames(styles.morphItem, className, {\n                [styles.morphItemTop]: verticalPositionAlign === 'top',\n                [styles.morphItemBottom]: verticalPositionAlign === 'bottom',\n                [styles.morphItemLeft]: horizontalPositionAlign === 'left',\n                [styles.morphItemRight]: horizontalPositionAlign === 'right',\n            })}\n            style={{ ...(style ?? {}), x, y, scaleX, scaleY }}\n        >\n            {children}\n        </motion.div>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"Morph.js","sources":["src/public/Morph.tsx"],"sourcesContent":["import { type PropsWithChildren, type FC, useLayoutEffect, useRef, type CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { useMotionValue, motion, HTMLMotionProps } from 'motion/react';\n\nimport { useMeasureAuto } from '@hh.ru/magritte-ui-nav-bar/internal/MetricsProvider';\nimport { useMorphStore } from '@hh.ru/magritte-ui-nav-bar/internal/MorphStore';\nimport { usePaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';\nimport {\n    lerp,\n    useStoreSyncedTransform,\n    calcMorphParams,\n    type HorizontalAlign,\n    type SizeAxis,\n    type VerticalAlign,\n} from '@hh.ru/magritte-ui-nav-bar/internal/utils';\nimport { useEnvironmentFingerprint } from '@hh.ru/magritte-ui-nav-bar/public/EnvironmentFingerprintNode';\nimport { useAnimationStage } from '@hh.ru/magritte-ui-nav-bar/public/Stage';\n\nimport styles from './nav-bar.less';\n\nexport interface MorphProps extends HTMLMotionProps<'div'> {\n    /**\n     * Задает соответствие между элементами для морфинга между начальным и конечным <Stage />\n     */\n    id: string;\n    style?: CSSProperties;\n    className?: string;\n    /**\n     * Задает ось на основе которой будет вычисляться коэффициент масштабирования применяемый в ходе анимации.\n     * В режиме `both` для каждой из осей применяется свой коэффициент что может привести к искажению пропорций в ходе\n     * анимации.\n     * В режиме `auto` применяется эвристика для выбора одного из трех остальных режимов для получения наилучшего\n     * результат и минимизации искажения пропорций.\n     */\n    sizeAxis?: SizeAxis;\n    /**\n     * Задает горизонтальное выравнивание анимируемых элементов в ходе анимации.\n     */\n    horizontalPositionAlign?: HorizontalAlign;\n    /**\n     * Задает вертикальное выравнивание анимируемых элементов в ходе анимации.\n     */\n    verticalPositionAlign?: VerticalAlign;\n}\n\nexport const Morph: FC<PropsWithChildren<MorphProps>> = ({\n    children,\n    id,\n    className,\n    style,\n    sizeAxis = 'auto',\n    horizontalPositionAlign = 'center',\n    verticalPositionAlign = 'center',\n    ...rest\n}) => {\n    const paneStore = usePaneStore();\n    const morphStore = useMorphStore();\n    const animationStage = useAnimationStage();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n    const scaleX = useMotionValue(1);\n    const scaleY = useMotionValue(1);\n\n    const startId = `start-${id}`;\n    const endId = `end-${id}`;\n\n    useStoreSyncedTransform(\n        paneStore.get('motionValue'),\n        morphStore,\n        [startId, endId],\n        () => {\n            const start = morphStore.get(animationStage === 'end' ? endId : startId);\n            const end = morphStore.get(animationStage === 'end' ? startId : endId);\n            const {\n                deltaX,\n                deltaY,\n                scaleX: xScale,\n                scaleY: yScale,\n            } = calcMorphParams(start, end, sizeAxis, horizontalPositionAlign, verticalPositionAlign);\n\n            return (progress: number) => {\n                const p = animationStage === 'end' ? 1 - progress : progress;\n                x.set(lerp(0, deltaX, p));\n                y.set(lerp(0, deltaY, p));\n\n                scaleX.set(lerp(1, xScale, p));\n                scaleY.set(lerp(1, yScale, p));\n            };\n        },\n        (interpolator, progress) => interpolator(progress)\n    );\n\n    const forceInvalidate = useMeasureAuto(rootRef, (rect) => morphStore.set(`${animationStage}-${id}`, rect), [\n        id,\n        animationStage,\n    ]);\n\n    useEnvironmentFingerprint(forceInvalidate);\n\n    useLayoutEffect(() => () => morphStore.set(`${animationStage}-${id}`, null), [morphStore, animationStage, id]);\n\n    return (\n        <motion.div\n            ref={rootRef}\n            {...rest}\n            className={classNames(styles.morphItem, className, {\n                [styles.morphItemTop]: verticalPositionAlign === 'top',\n                [styles.morphItemBottom]: verticalPositionAlign === 'bottom',\n                [styles.morphItemLeft]: horizontalPositionAlign === 'left',\n                [styles.morphItemRight]: horizontalPositionAlign === 'right',\n            })}\n            style={{ ...(style ?? {}), x, y, scaleX, scaleY }}\n        >\n            {children}\n        </motion.div>\n    );\n};\n"],"names":["_jsx"],"mappings":"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"}

package/public/NavBar.d.ts

@@ -1,25 +1,24 @@
-import { type RefObject, type FC } from 'react';
+import { type ReactNode, type RefObject, type FC } from 'react';
 import { MotionValue } from 'motion/react';
 import { type ShowDivider } from '@hh.ru/magritte-ui-divider';
-import { PaneStore } from '@hh.ru/magritte-ui-nav-bar/internal/PaneStore';
-import { type PaneElement } from '@hh.ru/magritte-ui-nav-bar/public/Pane';
-type PaneStoreContextValue = ((store: PaneStore) => VoidFunction) | null;
-export declare const useNavBarContext: () => PaneStoreContextValue;
 export interface NavBarProps {
     /**
-     * В качестве потомков могут передаваться только компоненты <Pane />
+     * В качестве потомков могут передаваться компоненты <Pane /> или произвольные элементы,
+     * которые будут автоматически обёрнуты в <Pane />.
      */
-    children: PaneElement | PaneElement[];
+    children: ReactNode;
     /**
      * Управляет режимом прозрачности:
      * -- Прозрачность отключена (`false`)
      * -- Прозрачный всегда (`true`)
      * -- Прозрачный в начале анимации (`start`)
      * -- Прозрачный в конце анимации (`end`)
+     * @default false
      */
     transparent?: 'start' | 'end' | boolean;
     /**
      * Управляет позицией триггера начала анимации
+     * @default start
      */
     startTriggerPosition?: 'start' | 'full-area' | RefObject<HTMLElement | null>;
     /**
@@ -30,10 +29,12 @@ export interface NavBarProps {
     endTriggerPosition?: RefObject<HTMLElement | null> | number;
     /**
      * Включает режим когда NavBar не занимает место в лейауте и контент располагается под ним.
+     * @default false
      */
     overlay?: boolean;
     /**
      * Управляет режимом автодоскролла. По умолчанию включен.
+     * @default true
      */
     snapScroll?: boolean;
     /**
@@ -41,6 +42,7 @@ export interface NavBarProps {
      * - `false` дивайдер отключен
      * - `always` дивайдер отображается постоянно
      * - `with-scroll` дивайдер отображается только когда контент подскроллен под NavBar
+     * @default false
      */
     showDivider?: ShowDivider;
     /**
@@ -51,4 +53,3 @@ export interface NavBarProps {
     animationProgress?: MotionValue<number>;
 }
 export declare const NavBar: FC<NavBarProps>;
-export {};