@beydesign/storybook 0.2.29 → 0.3.0

package/dist/stories/{Drawer → Navigation/Drawer}/DrawerCreditsCard.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@emotion/styled';
 import { DrawerSize } from './types';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { Popover, ProgressIndicator, ProgressIndicatorMode } from '../UI';
-import { getIconComponent } from '../../utils';
+import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+import { Popover, ProgressIndicator, ProgressIndicatorMode } from '../../UI';
+import { getIconComponent } from '../../../utils';
 import { GemIcon } from './DrawerIcons';
 const DEFAULT_INFO_LINES = [
     'Managed Agents 1 Min = 100 Credits',

package/dist/stories/{Drawer → Navigation/Drawer}/DrawerCreditsCard.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DrawerCreditsCard } from './DrawerCreditsCard';
 import { DrawerSize } from './types';
 const meta = {
-    title: 'Design System/Components/Drawer/DrawerCreditsCard',
+    title: 'Design System/Components/Navigation/DrawerCreditsCard',
     component: DrawerCreditsCard,
     parameters: {
         layout: 'centered',

package/dist/stories/{Drawer → Navigation/Drawer}/DrawerCreditsCardSkeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@emotion/styled';
-import { SkeletonLoader } from '../UI';
+import { SkeletonLoader } from '../../UI';
 import { DrawerSize } from './types';
 /** Mirrors {@link DrawerCreditsCard}'s Card so the skeleton snaps in place. */
 const Card = styled.div `

package/dist/stories/{Drawer → Navigation/Drawer}/DrawerCreditsCardSkeleton.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DrawerCreditsCardSkeleton } from './DrawerCreditsCardSkeleton';
 import { DrawerSize } from './types';
 const meta = {
-    title: 'Design System/Components/Drawer/DrawerCreditsCardSkeleton',
+    title: 'Design System/Components/Navigation/DrawerCreditsCardSkeleton',
     component: DrawerCreditsCardSkeleton,
     parameters: {
         layout: 'centered',

package/dist/stories/{Drawer → Navigation/Drawer}/DrawerNavItem.d.ts

@@ -3,6 +3,6 @@ import { DrawerNavItemProps } from './types';
 /**
  * A single navigation row for the {@link Drawer}. Supports active / inactive /
  * hover / disabled states, first / secondary hierarchy and expanded / collapsed
- * sizes. All colours resolve to theme tokens, so it adapts to light and dark.
+ * sizes — a top-level configuration of the shared {@link NavRow}.
  */
 export declare const DrawerNavItem: React.FC<DrawerNavItemProps>;

package/dist/stories/Navigation/Drawer/DrawerNavItem.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { DrawerNavItemState, DrawerNavItemHierarchy, DrawerSize, } from './types';
+import { NavRow } from '../internal';
+import { TypographySize, TypographyWeight } from '../../Typography';
+import { getIconComponent } from '../../../utils';
+const FIRST_PADDING = 'var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)';
+const SECONDARY_PADDING = 'var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px) var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)';
+const Caret = styled.span `
+  display: inline-flex;
+  flex-shrink: 0;
+  color: inherit;
+`;
+/**
+ * A single navigation row for the {@link Drawer}. Supports active / inactive /
+ * hover / disabled states, first / secondary hierarchy and expanded / collapsed
+ * sizes — a top-level configuration of the shared {@link NavRow}.
+ */
+export const DrawerNavItem = ({ text, icon, state = DrawerNavItemState.Inactive, size = DrawerSize.Expanded, hierarchy = DrawerNavItemHierarchy.First, showBadge = false, badgeText = 'Coming Soon', showSubNavCaret = false, onClick, className, style, testId, }) => {
+    const isSecondary = hierarchy === DrawerNavItemHierarchy.Secondary;
+    return (_jsx(NavRow, { text: text, icon: icon, state: state, collapsed: size === DrawerSize.Collapsed, iconSize: 20, typographySize: isSecondary ? TypographySize.TextXS : TypographySize.TextS, typographyWeight: isSecondary ? TypographyWeight.Medium : TypographyWeight.SemiBold, padding: isSecondary ? SECONDARY_PADDING : FIRST_PADDING, showBadge: showBadge, badgeText: badgeText, trailing: showSubNavCaret ? (_jsx(Caret, { children: getIconComponent('CaretRight', { size: 16 }) })) : undefined, onClick: onClick, className: className, style: style, testId: testId }));
+};

package/dist/stories/{Drawer → Navigation/Drawer}/DrawerNavItem.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DrawerNavItem } from './DrawerNavItem';
 import { DrawerNavItemState, DrawerNavItemHierarchy, DrawerSize, } from './types';
 const meta = {
-    title: 'Design System/Components/Drawer/DrawerNavItem',
+    title: 'Design System/Components/Navigation/DrawerNavItem',
     component: DrawerNavItem,
     parameters: {
         layout: 'centered',

package/dist/stories/{Drawer → Navigation/Drawer}/DrawerProfile.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { DrawerSize } from './types';
-import { Avatar, AvatarSize, AvatarStyle } from '../UI';
-import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { getIconComponent } from '../../utils';
+import { Avatar, AvatarSize, AvatarStyle } from '../../UI';
+import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+import { getIconComponent } from '../../../utils';
 const Container = styled.div `
   display: flex;
   flex-direction: column;

package/dist/stories/{Drawer → Navigation/Drawer}/DrawerProfile.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DrawerProfile } from './DrawerProfile';
 import { DrawerSize } from './types';
 const meta = {
-    title: 'Design System/Components/Drawer/DrawerProfile',
+    title: 'Design System/Components/Navigation/DrawerProfile',
     component: DrawerProfile,
     parameters: {
         layout: 'centered',

package/dist/stories/{Drawer → Navigation/Drawer}/DrawerProfileSkeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@emotion/styled';
-import { SkeletonLoader } from '../UI';
+import { SkeletonLoader } from '../../UI';
 import { DrawerSize } from './types';
 /**
  * Mirrors {@link DrawerProfile}'s clickable Row so the skeleton snaps in place:

package/dist/stories/{Drawer → Navigation/Drawer}/DrawerProfileSkeleton.stories.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DrawerProfileSkeleton } from './DrawerProfileSkeleton';
 import { DrawerSize } from './types';
 const meta = {
-    title: 'Design System/Components/Drawer/DrawerProfileSkeleton',
+    title: 'Design System/Components/Navigation/DrawerProfileSkeleton',
     component: DrawerProfileSkeleton,
     parameters: {
         layout: 'centered',

package/dist/stories/{Drawer → Navigation/Drawer}/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Drawer';
+export * from './DrawerBody';
 export * from './DrawerNavItem';
 export * from './DrawerCreditsCard';
 export * from './DrawerCreditsCardSkeleton';

package/dist/stories/{Drawer → Navigation/Drawer}/index.js

@@ -1,4 +1,5 @@
 export * from './Drawer';
+export * from './DrawerBody';
 export * from './DrawerNavItem';
 export * from './DrawerCreditsCard';
 export * from './DrawerCreditsCardSkeleton';

package/dist/stories/{Drawer → Navigation/Drawer}/types.d.ts

@@ -1,31 +1,13 @@
 import { CSSProperties } from 'react';
-import { IconName } from '../../utils';
+import { IconName } from '../../../utils';
+import type { NavItemHierarchy, NavItemState, NavPanelSize, SubNavConfig } from '../internal/types';
 /**
- * Expanded / collapsed size shared across the Drawer and its sub-components.
+ * The canonical declarations live in `../internal/types` so that the shared
+ * `NavRow` and `NavPanel` primitives can consume them without depending on the
+ * Drawer. They are re-exported here under their established public names.
+ * (`SubNavConfig` and friends are re-exported from `../SubNav`, their own home.)
  */
-export declare enum DrawerSize {
-    Expanded = "Expanded",
-    Collapsed = "Collapsed"
-}
-/**
- * Visual state of a single navigation item.
- * `Hover` is mostly useful for documentation/Storybook — at runtime an
- * `Inactive` item also picks up the hover styling on real pointer hover.
- */
-export declare enum DrawerNavItemState {
-    Active = "Active",
-    Inactive = "Inactive",
-    Hover = "Hover",
-    Disabled = "Disabled"
-}
-/**
- * Hierarchy of a navigation item. `First` is a top-level entry (36px row),
- * `Secondary` is a nested sub-item (28px row, lighter weight).
- */
-export declare enum DrawerNavItemHierarchy {
-    First = "First",
-    Secondary = "Secondary"
-}
+export { NavItemState as DrawerNavItemState, NavPanelSize as DrawerSize, NavItemHierarchy as DrawerNavItemHierarchy, } from '../internal/types';
 /**
  * Props for the standalone {@link DrawerNavItem} component.
  */
@@ -35,15 +17,20 @@ export interface DrawerNavItemProps {
     /** Phosphor icon name rendered to the left of the label. */
     icon: IconName;
     /** Visual state of the item. */
-    state?: DrawerNavItemState;
+    state?: NavItemState;
     /** Expanded (icon + label) or Collapsed (icon only). */
-    size?: DrawerSize;
+    size?: NavPanelSize;
     /** Top-level (`First`) or nested (`Secondary`) item. */
-    hierarchy?: DrawerNavItemHierarchy;
+    hierarchy?: NavItemHierarchy;
     /** Show a trailing badge (e.g. "Coming Soon"). Hidden when collapsed. */
     showBadge?: boolean;
     /** Text for the trailing badge. */
     badgeText?: string;
+    /**
+     * Render a trailing caret marking this item as opening a sub-navigation.
+     * Hidden when collapsed.
+     */
+    showSubNavCaret?: boolean;
     /** Click handler. Not fired when the item is disabled. */
     onClick?: () => void;
     className?: string;
@@ -56,7 +43,7 @@ export interface DrawerNavItemProps {
  */
 export interface DrawerCreditsCardProps {
     /** Expanded (full card) or Collapsed (icon only, details in a popover). */
-    size?: DrawerSize;
+    size?: NavPanelSize;
     /** Credits consumed so far. */
     usedCredits?: number;
     /** Total credits available in the plan. */
@@ -82,7 +69,7 @@ export interface DrawerCreditsCardProps {
  */
 export interface DrawerCreditsCardSkeletonProps {
     /** Expanded (full card) or Collapsed (icon-only box). */
-    size?: DrawerSize;
+    size?: NavPanelSize;
     className?: string;
     style?: CSSProperties;
     testId?: string;
@@ -103,7 +90,7 @@ export interface DrawerProfileMenuItem {
  */
 export interface DrawerProfileProps {
     /** Expanded (avatar + text) or Collapsed (avatar only). */
-    size?: DrawerSize;
+    size?: NavPanelSize;
     /** Display name. */
     name: string;
     /** Secondary line, usually the email. */
@@ -129,7 +116,7 @@ export interface DrawerProfileProps {
  */
 export interface DrawerProfileSkeletonProps {
     /** Expanded (avatar + text lines) or Collapsed (avatar circle only). */
-    size?: DrawerSize;
+    size?: NavPanelSize;
     className?: string;
     style?: CSSProperties;
     testId?: string;
@@ -142,15 +129,24 @@ export interface DrawerNavItemConfig {
     key?: string;
     text: string;
     icon: IconName;
-    hierarchy?: DrawerNavItemHierarchy;
+    hierarchy?: NavItemHierarchy;
     /** Force a state. When omitted it is derived from `activeKey` / `disabled`. */
-    state?: DrawerNavItemState;
+    state?: NavItemState;
     disabled?: boolean;
     showBadge?: boolean;
     badgeText?: string;
     /** When set, clicking navigates to this URL. */
     link?: string;
     onClick?: () => void;
+    /**
+     * A secondary navigation this item drills into (e.g. the Settings sub-nav).
+     *
+     * On desktop the item navigates as usual and the sub-nav is rendered as its
+     * own panel beside the Drawer (`SubNav`). Where there is only room for
+     * one panel — `MobileNav` — the item instead grows a trailing caret and
+     * pushes this config as a second pane.
+     */
+    subNav?: SubNavConfig;
 }
 /**
  * Props for the composed {@link Drawer} component.
@@ -186,3 +182,17 @@ export interface DrawerProps {
     style?: CSSProperties;
     testId?: string;
 }
+/**
+ * Props for the {@link DrawerBody} — the Drawer's content without any panel
+ * chrome, so it can be dropped into the `MobileNav` overlay as its root pane.
+ */
+export interface DrawerBodyProps extends Pick<DrawerProps, 'navItems' | 'activeKey' | 'credits' | 'creditsLoading' | 'profile' | 'profileLoading' | 'logo'> {
+    /** Expanded (icon + label) or Collapsed (icon only). */
+    size?: NavPanelSize;
+    /**
+     * When provided, items carrying a `subNav` render a trailing caret and call
+     * this instead of navigating. The desktop `Drawer` omits it, so those items
+     * behave like any other nav entry.
+     */
+    onSubNavOpen?: (item: DrawerNavItemConfig) => void;
+}

package/dist/stories/Navigation/Drawer/types.js

@@ -0,0 +1,7 @@
+/**
+ * The canonical declarations live in `../internal/types` so that the shared
+ * `NavRow` and `NavPanel` primitives can consume them without depending on the
+ * Drawer. They are re-exported here under their established public names.
+ * (`SubNavConfig` and friends are re-exported from `../SubNav`, their own home.)
+ */
+export { NavItemState as DrawerNavItemState, NavPanelSize as DrawerSize, NavItemHierarchy as DrawerNavItemHierarchy, } from '../internal/types';

package/dist/stories/Navigation/MobileNav.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { MobileNavProps } from './types';
+/**
+ * The single navigation panel for mobile, where there is no room for the
+ * `Drawer` and a settings sub-nav side by side. It slides in over the page and
+ * holds both as pushable panes: the root pane is the very same {@link DrawerBody}
+ * the desktop `Drawer` renders, and any nav item carrying a `subNav` grows a
+ * trailing caret that pushes that config as a {@link SubNavBody} pane with
+ * a back button. Nothing is duplicated — only the chrome around the bodies
+ * changes between desktop and mobile.
+ *
+ * `MobileNavBar` renders this behind its hamburger; use it directly if the app
+ * already has its own mobile header.
+ */
+export declare const MobileNav: React.FC<MobileNavProps>;

package/dist/stories/Navigation/MobileNav.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { Drawer as MuiDrawer } from '@mui/material';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+import { DrawerBody } from './Drawer';
+import { SubNavBody } from './SubNav';
+import { NavPanel } from './internal';
+const DEFAULT_WIDTH = '315px';
+const slideForward = keyframes `
+  from { transform: translateX(16px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+`;
+const slideBack = keyframes `
+  from { transform: translateX(-16px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+`;
+/**
+ * Hosts one pane at a time, growing to fill the panel so the body's own flex
+ * chain (logo header, then a nav that pushes the footer down) still works.
+ *
+ * Keep the default `min-height: auto`: on a short viewport the pane must refuse
+ * to shrink below its content, otherwise the panel scrolls to a height that
+ * excludes the profile footer and clips it.
+ */
+const Pane = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  animation: ${({ $forward }) => ($forward ? slideForward : slideBack)} 0.25s
+    ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+/**
+ * The single navigation panel for mobile, where there is no room for the
+ * `Drawer` and a settings sub-nav side by side. It slides in over the page and
+ * holds both as pushable panes: the root pane is the very same {@link DrawerBody}
+ * the desktop `Drawer` renders, and any nav item carrying a `subNav` grows a
+ * trailing caret that pushes that config as a {@link SubNavBody} pane with
+ * a back button. Nothing is duplicated — only the chrome around the bodies
+ * changes between desktop and mobile.
+ *
+ * `MobileNavBar` renders this behind its hamburger; use it directly if the app
+ * already has its own mobile header.
+ */
+export const MobileNav = ({ open, onOpenChange, navItems, activeKey, credits, creditsLoading, profile, profileLoading, logo, width = DEFAULT_WIDTH, className, style, testId, }) => {
+    const [subNav, setSubNav] = useState(null);
+    const close = useCallback(() => onOpenChange(false), [onOpenChange]);
+    /** Navigating away should dismiss the overlay, whichever pane it happened in. */
+    const closingNavItems = useMemo(() => navItems.map((item) => ({
+        ...item,
+        onClick: () => {
+            item.onClick?.();
+            close();
+        },
+    })), [navItems, close]);
+    const closingSubNav = useMemo(() => {
+        if (!subNav)
+            return null;
+        return {
+            ...subNav,
+            sections: subNav.sections.map((section) => ({
+                ...section,
+                items: section.items.map((item) => ({
+                    ...item,
+                    onClick: () => {
+                        item.onClick?.();
+                        close();
+                    },
+                })),
+            })),
+        };
+    }, [subNav, close]);
+    const handleSubNavOpen = (item) => {
+        if (item.subNav)
+            setSubNav(item.subNav);
+    };
+    return (_jsx(MuiDrawer, { anchor: "left", open: open, onClose: close, className: className, 
+        /* Reset to the root pane only once the panel is fully out of sight. */
+        SlideProps: { onExited: () => setSubNav(null) }, PaperProps: {
+            sx: {
+                width,
+                backgroundColor: 'transparent',
+                boxShadow: 'none',
+                border: 'none',
+                overflow: 'hidden',
+            },
+            style,
+        }, sx: {
+            '& .MuiBackdrop-root': {
+                backgroundColor: 'var(--color-background-bg-overlay-2)',
+            },
+        }, "data-testid": testId, children: _jsx(NavPanel, { "$borderColor": "var(--color-border-border-divider)", children: closingSubNav ? (_jsx(Pane, { "$forward": true, children: _jsx(SubNavBody, { title: closingSubNav.title, sections: closingSubNav.sections, activeKey: closingSubNav.activeKey, onBack: () => setSubNav(null) }) }, "sub-nav")) : (_jsx(Pane, { "$forward": false, children: _jsx(DrawerBody, { navItems: closingNavItems, activeKey: activeKey, credits: credits, creditsLoading: creditsLoading, profile: profile, profileLoading: profileLoading, logo: logo, onSubNavOpen: handleSubNavOpen }) }, "root")) }) }));
+};

package/dist/stories/Navigation/MobileNav.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MobileNav } from './MobileNav';
+/**
+ * Drives the overlay the way an app does: a trigger button, and `open` state
+ * the component reports back through `onOpenChange`.
+ */
+declare const MobileNavExample: ({ navItems, activeKey, ...rest }: Partial<React.ComponentProps<typeof MobileNav>>) => import("react").JSX.Element;
+declare const meta: Meta<typeof MobileNavExample>;
+export default meta;
+type Story = StoryObj<typeof MobileNavExample>;
+/**
+ * The root pane. "Settings" carries a `subNav`, so it renders a trailing caret
+ * and pushes instead of navigating.
+ */
+export declare const Default: Story;
+/**
+ * Without a `subNav` anywhere in `navItems` there is nothing to drill into, so
+ * no item shows a caret and the overlay is a plain single-pane nav.
+ */
+export declare const WithoutSubNav: Story;
+/**
+ * A sub-nav is not a settings-only idea — any item can declare one. Here the
+ * developer entry drills into a subset of the same sections.
+ */
+export declare const CustomSubNav: Story;

package/dist/stories/Navigation/MobileNav.stories.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MobileNav } from './MobileNav';
+import { credits, drawerNavItems, profile, settingsSections, } from './navigation.fixtures';
+import { MainButton, ButtonHierarchy, ButtonSize, ButtonDisplayMode, } from '../Buttons';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+/**
+ * Drives the overlay the way an app does: a trigger button, and `open` state
+ * the component reports back through `onOpenChange`.
+ */
+const MobileNavExample = ({ navItems = drawerNavItems, activeKey = 'settings', ...rest }) => {
+    const [open, setOpen] = useState(true);
+    return (_jsxs("div", { style: {
+            height: '100vh',
+            padding: 16,
+            backgroundColor: 'var(--color-background-bg-page)',
+        }, children: [_jsx(MainButton, { text: "Open menu", displayIcon: "List", displayIconMode: ButtonDisplayMode.Default, hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.sm, onClick: () => setOpen(true) }), _jsx("div", { style: { marginTop: 16 }, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-paragraph)", children: "Tap \"Settings\" in the panel to push the settings sub-nav, then use the back arrow to return." }) }), _jsx(MobileNav, { open: open, onOpenChange: setOpen, navItems: navItems, activeKey: activeKey, credits: credits, profile: profile, ...rest })] }));
+};
+const meta = {
+    title: 'Design System/Components/Navigation/MobileNav',
+    component: MobileNavExample,
+    parameters: {
+        layout: 'fullscreen',
+        viewport: { defaultViewport: 'mobile1' },
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7317-23750',
+        },
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+/**
+ * The root pane. "Settings" carries a `subNav`, so it renders a trailing caret
+ * and pushes instead of navigating.
+ */
+export const Default = {};
+/**
+ * Without a `subNav` anywhere in `navItems` there is nothing to drill into, so
+ * no item shows a caret and the overlay is a plain single-pane nav.
+ */
+export const WithoutSubNav = {
+    args: {
+        navItems: drawerNavItems.filter((item) => item.key !== 'settings'),
+        activeKey: 'kb',
+    },
+};
+/**
+ * A sub-nav is not a settings-only idea — any item can declare one. Here the
+ * developer entry drills into a subset of the same sections.
+ */
+export const CustomSubNav = {
+    args: {
+        activeKey: 'developers',
+        navItems: drawerNavItems.map((item) => item.key === 'developers'
+            ? {
+                ...item,
+                subNav: {
+                    title: 'Developers',
+                    sections: settingsSections.filter((section) => section.key === 'developers'),
+                },
+            }
+            : item),
+    },
+};

package/dist/stories/Navigation/MobileNavBar.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box, Drawer as MuiDrawer } from '@mui/material';
+import { Box } from '@mui/material';
 import { Logo } from '../UI';
-import { Drawer } from '../Drawer';
+import { MobileNav } from './MobileNav';
 import { getIconComponent } from '../../utils';
 const shadowXs = 'var(--global-shadows-shadow-xs-offset-x) ' +
     'var(--global-shadows-shadow-xs-offset-y) ' +
@@ -29,15 +29,5 @@ export const MobileNavBar = ({ onSearchClick, drawerProps, showSearch = true, lo
         if (drawerProps)
             setOpen(true);
     };
-    const closeDrawer = () => setOpen(false);
-    const navItems = drawerProps?.navItems.map((item) => ({
-        ...item,
-        onClick: () => {
-            item.onClick?.();
-            closeDrawer();
-        },
-    }));
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { className: className, sx: style, boxSizing: 'border-box', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%', height: '60px', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page)', children: [_jsx(Box, { display: 'flex', alignItems: 'center', sx: { '& svg': { display: 'block', height: '20px', width: 'auto' } }, children: _jsx(Logo, { color: 'var(--color-foreground-fg-brand-logo)', ...logoProps }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showSearch && (_jsx(NavIconButton, { icon: 'MagnifyingGlass', ariaLabel: 'Search', onClick: onSearchClick })), _jsx(NavIconButton, { icon: 'List', ariaLabel: 'Open menu', onClick: handleMenuClick })] })] }), drawerProps && navItems && (_jsx(MuiDrawer, { anchor: 'left', open: open, onClose: closeDrawer, PaperProps: {
-                    sx: { backgroundColor: 'transparent', boxShadow: 'none' },
-                }, children: _jsx(Drawer, { ...drawerProps, navItems: navItems, showToggle: false }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { className: className, sx: style, boxSizing: 'border-box', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%', height: '60px', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page)', children: [_jsx(Box, { display: 'flex', alignItems: 'center', sx: { '& svg': { display: 'block', height: '20px', width: 'auto' } }, children: _jsx(Logo, { color: 'var(--color-foreground-fg-brand-logo)', ...logoProps }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showSearch && (_jsx(NavIconButton, { icon: 'MagnifyingGlass', ariaLabel: 'Search', onClick: onSearchClick })), _jsx(NavIconButton, { icon: 'List', ariaLabel: 'Open menu', onClick: handleMenuClick })] })] }), drawerProps && (_jsx(MobileNav, { open: open, onOpenChange: setOpen, navItems: drawerProps.navItems, activeKey: drawerProps.activeKey, credits: drawerProps.credits, creditsLoading: drawerProps.creditsLoading, profile: drawerProps.profile, profileLoading: drawerProps.profileLoading, logo: drawerProps.logo }))] }));
 };

package/dist/stories/Navigation/MobileNavBar.stories.js

@@ -1,23 +1,10 @@
 import { MobileNavBar } from './MobileNavBar';
-const navItems = [
-    { key: 'home', text: 'Home', icon: 'House' },
-    { key: 'avatars', text: 'Avatars', icon: 'UserFocus' },
-    { key: 'agents', text: 'My Agents', icon: 'Headset' },
-    { key: 'ttv', text: 'Text-to-Video', icon: 'VideoCamera' },
-    { key: 'kb', text: 'Knowledge Base', icon: 'Book' },
-    { key: 'conversations', text: 'Conversations', icon: 'ChatTeardropDots' },
-    { key: 'analytics', text: 'Analytics', icon: 'ChartBar' },
-    { key: 'api', text: 'API keys', icon: 'Key' },
-    { key: 'developers', text: 'Developers', icon: 'BracketsCurly' },
-];
+import { credits, drawerNavItems, profile } from './navigation.fixtures';
 const drawerProps = {
-    navItems,
+    navItems: drawerNavItems,
     activeKey: 'kb',
-    credits: { usedCredits: 500, maxCredits: 2000 },
-    profile: {
-        name: 'Emma Novak',
-        email: 'emma@example.com',
-    },
+    credits,
+    profile,
 };
 const meta = {
     title: 'Design System/Components/Navigation/MobileNavBar',
@@ -37,7 +24,7 @@ const meta = {
         },
         drawerProps: {
             control: false,
-            description: 'Drawer config. When provided, the menu button opens the navigation drawer as an overlay.',
+            description: 'Drawer config. When provided, the menu button opens the navigation as a `MobileNav` overlay. Any nav item carrying a `subNav` (here: Settings) becomes a pushable pane inside it.',
             table: { type: { summary: 'DrawerProps' } },
         },
         showSearch: {

package/dist/stories/Navigation/SettingsPage.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * The settings page at both sizes, driven by a single navigation config.
+ *
+ * Above 640px the primary {@link Drawer} and the {@link SubNav} sit side
+ * by side. Below it there is no room for two panels, so `MobileNavBar` slides in
+ * one `MobileNav` overlay where the Settings item — carrying that same
+ * `sections` array as its `subNav` — pushes the settings pane instead.
+ *
+ * Resize the preview across 640px to see them swap.
+ */
+declare const SettingsPageExample: () => import("react").JSX.Element;
+declare const meta: Meta<typeof SettingsPageExample>;
+export default meta;
+type Story = StoryObj<typeof SettingsPageExample>;
+/** Two panels side by side. Widen the preview past 640px. */
+export declare const DrawerWithSubNav: Story;
+/** The same config, merged into one overlay. Open the menu, then tap Settings. */
+export declare const Mobile: Story;