@beydesign/storybook 0.2.30 → 0.3.0

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;

package/dist/stories/Navigation/SettingsPage.stories.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useMediaQuery } from '@mui/material';
+import { SubNav } from './SubNav';
+import { Drawer } from './Drawer';
+import { MobileNavBar } from './MobileNavBar';
+import { credits, drawerNavItems, profile, settingsLabels, settingsSections, } from './navigation.fixtures';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+/** The repo's de-facto mobile breakpoint (see `UI/PromoBanner.tsx`). */
+const MOBILE_QUERY = '(max-width: 640px)';
+/**
+ * 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.
+ */
+const SettingsPageExample = () => {
+    const isMobile = useMediaQuery(MOBILE_QUERY);
+    const [activeSetting, setActiveSetting] = useState('api-keys');
+    const sections = settingsSections.map((section) => ({
+        ...section,
+        items: section.items.map((item) => ({
+            ...item,
+            onClick: () => setActiveSetting(item.key ?? item.text),
+        })),
+    }));
+    const navItems = drawerNavItems.map((item) => item.subNav ? { ...item, subNav: { ...item.subNav, sections } } : item);
+    const content = (_jsxs("main", { style: { flex: 1, padding: '32px 40px', overflowY: 'auto' }, children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-title)", children: settingsLabels[activeSetting] ?? activeSetting }), _jsx("div", { style: { marginTop: 12 }, children: _jsxs(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-paragraph)", children: ["Content for the \"", settingsLabels[activeSetting] ?? activeSetting, "\" settings page renders here."] }) })] }));
+    if (isMobile) {
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100vh',
+                backgroundColor: 'var(--color-background-bg-page)',
+            }, children: [_jsx(MobileNavBar, { showSearch: false, drawerProps: {
+                        navItems,
+                        activeKey: 'settings',
+                        credits,
+                        profile,
+                    } }), content] }));
+    }
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            height: '100vh',
+            backgroundColor: 'var(--color-background-bg-page)',
+        }, children: [_jsx(Drawer, { navItems: navItems, activeKey: "settings", credits: credits, profile: profile }), _jsx(SubNav, { sections: sections, activeKey: activeSetting }), content] }));
+};
+const meta = {
+    title: 'Design System/Examples/Settings Page',
+    component: SettingsPageExample,
+    parameters: {
+        layout: 'fullscreen',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7002-33215',
+        },
+    },
+};
+export default meta;
+/** Two panels side by side. Widen the preview past 640px. */
+export const DrawerWithSubNav = {};
+/** The same config, merged into one overlay. Open the menu, then tap Settings. */
+export const Mobile = {
+    parameters: {
+        viewport: { defaultViewport: 'mobile1' },
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7317-23750',
+        },
+    },
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SubNavProps } from './types';
+/**
+ * Secondary navigation for the Settings area: a "Settings" heading followed by
+ * titled sections of {@link SubNavItem} rows. Sits beside the primary
+ * {@link Drawer} and only appears on settings pages. Every colour, space and
+ * radius resolves to `@beydesign/tokens` CSS variables, so it renders correctly
+ * in light and dark.
+ *
+ * Below the mobile breakpoint there is no room for a second panel — pass the
+ * same `sections` as a nav item's `subNav` to `MobileNav` instead, which pushes
+ * the identical {@link SubNavBody} as a pane of the one overlay.
+ */
+export declare const SubNav: React.FC<SubNavProps>;

package/dist/stories/Navigation/SubNav/SubNav.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SubNavBody } from './SubNavBody';
+import { NavPanel } from '../internal';
+const WIDTH = '238px';
+/**
+ * Secondary navigation for the Settings area: a "Settings" heading followed by
+ * titled sections of {@link SubNavItem} rows. Sits beside the primary
+ * {@link Drawer} and only appears on settings pages. Every colour, space and
+ * radius resolves to `@beydesign/tokens` CSS variables, so it renders correctly
+ * in light and dark.
+ *
+ * Below the mobile breakpoint there is no room for a second panel — pass the
+ * same `sections` as a nav item's `subNav` to `MobileNav` instead, which pushes
+ * the identical {@link SubNavBody} as a pane of the one overlay.
+ */
+export const SubNav = ({ title, sections, activeKey, onBack, className, style, testId, }) => (_jsx(NavPanel, { as: "aside", "$width": WIDTH, "$height": "100vh", "$borderColor": "var(--color-border-border-component)", className: className, style: style, "data-testid": testId, children: _jsx(SubNavBody, { title: title, sections: sections, activeKey: activeKey, onBack: onBack }) }));

package/dist/stories/{Settings/SettingsNav.stories.d.ts → Navigation/SubNav/SubNav.stories.d.ts}

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { SettingsNav } from './SettingsNav';
-declare const meta: Meta<typeof SettingsNav>;
+import { SubNav } from './SubNav';
+declare const meta: Meta<typeof SubNav>;
 export default meta;
-type Story = StoryObj<typeof SettingsNav>;
+type Story = StoryObj<typeof SubNav>;
 export declare const Default: Story;
 export declare const BrandingActive: Story;

package/dist/stories/{Settings/SettingsNav.stories.js → Navigation/SubNav/SubNav.stories.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SettingsNav } from './SettingsNav';
+import { SubNav } from './SubNav';
 const sections = [
     {
         key: 'business',
@@ -33,8 +33,8 @@ const sections = [
     },
 ];
 const meta = {
-    title: 'Design System/Components/Settings/SettingsNav',
-    component: SettingsNav,
+    title: 'Design System/Components/Navigation/SubNav',
+    component: SubNav,
     parameters: {
         layout: 'fullscreen',
         design: {

package/dist/stories/Navigation/SubNav/SubNavBody.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SubNavBodyProps } from './types';
+/**
+ * The settings navigation's content — heading and titled sections of
+ * {@link SubNavItem} rows — without any panel chrome. `SubNav` wraps
+ * it in a `NavPanel` to sit beside the desktop `Drawer`; `MobileNav` pushes the
+ * same body as the second pane of its overlay, where `onBack` renders the
+ * back arrow that pops it.
+ */
+export declare const SubNavBody: React.FC<SubNavBodyProps>;

package/dist/stories/Navigation/SubNav/SubNavBody.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { SubNavItem } from './SubNavItem';
+import { NavItemState } from '../internal';
+import { Typography, TypographySize, TypographyWeight } from '../../Typography';
+import { getIconComponent } from '../../../utils';
+/** Composed from the semantic `shadow-xs` design token. */
+const SHADOW_XS = 'var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)';
+const Content = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 20px);
+  height: 100%;
+`;
+const Header = styled.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  padding: ${({ $hasBack }) => $hasBack
+    ? '0'
+    : '0 var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)'};
+`;
+const BackButton = styled.button `
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  border: none;
+  border-radius: var(--spacing-tokens-size-in-px-radius-radius-xs, 4px);
+  background-color: transparent;
+  color: var(--color-foreground-fg-secondary);
+  cursor: pointer;
+  filter: drop-shadow(${SHADOW_XS});
+  transition: color 0.2s ease-in-out;
+
+  &:hover {
+    color: var(--color-text-text-clicable);
+  }
+`;
+const Sections = styled.nav `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 20px);
+`;
+const Section = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+`;
+const SectionTitle = styled.div `
+  padding: 0 var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  text-transform: uppercase;
+`;
+const Items = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
+`;
+const resolveState = (item, activeKey) => {
+    if (item.state)
+        return item.state;
+    if (item.disabled)
+        return NavItemState.Disabled;
+    const key = item.key ?? item.text;
+    if (activeKey !== undefined && key === activeKey) {
+        return NavItemState.Active;
+    }
+    return NavItemState.Inactive;
+};
+/**
+ * The settings navigation's content — heading and titled sections of
+ * {@link SubNavItem} rows — without any panel chrome. `SubNav` wraps
+ * it in a `NavPanel` to sit beside the desktop `Drawer`; `MobileNav` pushes the
+ * same body as the second pane of its overlay, where `onBack` renders the
+ * back arrow that pops it.
+ */
+export const SubNavBody = ({ title = 'Settings', sections, activeKey, onBack, }) => {
+    const handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        if (item.link) {
+            window.location.href = item.link;
+        }
+        else {
+            item.onClick?.();
+        }
+    };
+    return (_jsxs(Content, { children: [_jsxs(Header, { "$hasBack": Boolean(onBack), children: [onBack && (_jsx(BackButton, { type: "button", onClick: onBack, "aria-label": "Back", children: getIconComponent('ArrowLeft', { size: 20 }) })), _jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: title })] }), _jsx(Sections, { children: sections.map((section, sectionIndex) => (_jsxs(Section, { children: [section.title && (_jsx(SectionTitle, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-subtle)", children: section.title }) })), _jsx(Items, { children: section.items.map((item) => (_jsx(SubNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), showBadge: item.showBadge, badgeText: item.badgeText, onClick: () => handleItemClick(item) }, item.key ?? item.text))) })] }, section.key ?? section.title ?? sectionIndex))) })] }));
+};

package/dist/stories/Navigation/SubNav/SubNavItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SubNavItemProps } from './types';
+/**
+ * A single navigation row for the {@link SubNav}. Deliberately more compact
+ * than {@link DrawerNavItem} — 28px tall (4px vertical padding), a 16px icon and
+ * a Medium-weight label — to read as secondary navigation. A configuration of
+ * the shared {@link NavRow}, so it shares its states, colours and hover
+ * behaviour with every other nav row in the system.
+ */
+export declare const SubNavItem: React.FC<SubNavItemProps>;

package/dist/stories/Navigation/SubNav/SubNavItem.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavItemState, NavRow } from '../internal';
+import { TypographySize, TypographyWeight } from '../../Typography';
+const PADDING = 'var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px) var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)';
+/**
+ * A single navigation row for the {@link SubNav}. Deliberately more compact
+ * than {@link DrawerNavItem} — 28px tall (4px vertical padding), a 16px icon and
+ * a Medium-weight label — to read as secondary navigation. A configuration of
+ * the shared {@link NavRow}, so it shares its states, colours and hover
+ * behaviour with every other nav row in the system.
+ */
+export const SubNavItem = ({ text, icon, state = NavItemState.Inactive, showBadge = false, badgeText = 'Coming Soon', onClick, className, style, testId, }) => (_jsx(NavRow, { text: text, icon: icon, state: state, iconSize: 16, typographySize: TypographySize.TextS, typographyWeight: TypographyWeight.Medium, padding: PADDING, showBadge: showBadge, badgeText: badgeText, onClick: onClick, className: className, style: style, testId: testId }));

package/dist/stories/Navigation/SubNav/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SubNav';
+export * from './SubNavBody';
+export * from './SubNavItem';
+export * from './types';

package/dist/stories/Navigation/SubNav/index.js

@@ -0,0 +1,4 @@
+export * from './SubNav';
+export * from './SubNavBody';
+export * from './SubNavItem';
+export * from './types';

package/dist/stories/Navigation/SubNav/types.d.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties } from 'react';
+import type { IconName } from '../../../utils';
+import type { NavItemState, SubNavConfig } from '../internal/types';
+/**
+ * The entry, section and config shapes are declared in `../internal/types` so
+ * that a `Drawer` nav item can carry a `subNav` without the two folders
+ * depending on each other. This is their public home — and it is what lets the
+ * very same `sections` array drive both the desktop {@link SubNav} panel and
+ * the pane `MobileNav` pushes.
+ */
+export type { SubNavConfig, SubNavItemConfig, SubNavSection, } from '../internal/types';
+/**
+ * Props for the standalone {@link SubNavItem} row. Compared to
+ * {@link DrawerNavItem} this is a more compact secondary-nav row: 28px tall,
+ * 16px icon and Medium-weight label.
+ */
+export interface SubNavItemProps {
+    /** Label text. */
+    text: string;
+    /** Phosphor icon name rendered to the left of the label. */
+    icon: IconName;
+    /** Visual state of the item. */
+    state?: NavItemState;
+    /** Show a trailing badge (e.g. "Coming Soon"). */
+    showBadge?: boolean;
+    /** Text for the trailing badge. */
+    badgeText?: string;
+    /** Click handler. Not fired when the item is disabled. */
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    /** Renders as `data-testid` for testing. */
+    testId?: string;
+}
+/**
+ * Props for the {@link SubNavBody} — the settings navigation's content
+ * without any panel chrome, so it can be pushed as a pane inside the
+ * `MobileNav` overlay.
+ */
+export interface SubNavBodyProps extends SubNavConfig {
+    /**
+     * When provided, a back button is rendered before the title. Used by
+     * `MobileNav` to pop back to the root nav; the desktop panel omits it.
+     */
+    onBack?: () => void;
+}
+/**
+ * Props for the composed {@link SubNav} secondary navigation.
+ */
+export interface SubNavProps extends SubNavBodyProps {
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+}

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

@@ -1,4 +1,7 @@
+export * from './Drawer';
+export * from './SubNav';
 export * from './Header';
+export * from './MobileNav';
 export * from './MobileNavBar';
 export * from './NavItem';
 export * from './Sidebar';

package/dist/stories/Navigation/index.js

@@ -1,4 +1,7 @@
+export * from './Drawer';
+export * from './SubNav';
 export * from './Header';
+export * from './MobileNav';
 export * from './MobileNavBar';
 export * from './NavItem';
 export * from './Sidebar';

package/dist/stories/Navigation/internal/NavPanel.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The panel chrome shared by every navigation surface: the `Drawer`, the
+ * `SubNav` beside it, and the single overlay panel `MobileNav` slides in.
+ * Owns the padding, page-contrast background, right border, scroll behaviour
+ * and the theme-aware thin scrollbar, so none of that is repeated per nav.
+ *
+ * Sizing is left to the caller — `Drawer` fills a shell that animates its own
+ * width, `SubNav` is a fixed-width full-height column, and `MobileNav`
+ * fills the overlay.
+ */
+export declare const NavPanel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    /** Panel width. Defaults to filling its parent. */
+    $width?: string;
+    /** Panel height. Defaults to filling its parent. */
+    $height?: string;
+    /** Right border colour. Defaults to the subtle border token. */
+    $borderColor?: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/stories/Navigation/internal/NavPanel.js

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+/**
+ * The panel chrome shared by every navigation surface: the `Drawer`, the
+ * `SubNav` beside it, and the single overlay panel `MobileNav` slides in.
+ * Owns the padding, page-contrast background, right border, scroll behaviour
+ * and the theme-aware thin scrollbar, so none of that is repeated per nav.
+ *
+ * Sizing is left to the caller — `Drawer` fills a shell that animates its own
+ * width, `SubNav` is a fixed-width full-height column, and `MobileNav`
+ * fills the overlay.
+ */
+export const NavPanel = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: ${({ $width }) => $width ?? '100%'};
+  height: ${({ $height }) => $height ?? '100%'};
+  padding: var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)
+    var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)
+    var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
+  background-color: var(--color-background-bg-page-contrast);
+  border-right: 1px solid
+    ${({ $borderColor }) => $borderColor ?? 'var(--color-border-border-subtle)'};
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  /* Theme-aware thin scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-border-component) transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-border-border-component);
+    border-radius: var(--spacing-tokens-size-in-px-radius-radius-full);
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-text-text-subtle);
+  }
+`;

package/dist/stories/Navigation/internal/NavRow.d.ts

@@ -0,0 +1,45 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { NavItemState } from './types';
+import { TypographySize, TypographyWeight } from '../../Typography';
+import { IconName } from '../../../utils';
+export interface NavRowProps {
+    /** Label text. Hidden (and used as the hover tooltip) when collapsed. */
+    text: string;
+    /** Phosphor icon name rendered to the left of the label. */
+    icon: IconName;
+    /** Visual state of the row. */
+    state?: NavItemState;
+    /** Icon-only 36px square row. */
+    collapsed?: boolean;
+    /** Size of the leading icon in px. */
+    iconSize?: number;
+    /** Type scale of the label. */
+    typographySize?: TypographySize;
+    /** Weight of the label. */
+    typographyWeight?: TypographyWeight;
+    /** Row padding when expanded. */
+    padding?: string;
+    /** Show a trailing badge (e.g. "Coming Soon"). Hidden when collapsed. */
+    showBadge?: boolean;
+    /** Text for the trailing badge. */
+    badgeText?: string;
+    /**
+     * Rendered at the very end of the row, after the label and badge — e.g. the
+     * caret that marks an item as opening a sub-navigation. Hidden when collapsed.
+     */
+    trailing?: ReactNode;
+    /** Click handler. Not fired when the row is disabled. */
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    /** Renders as `data-testid` for testing. */
+    testId?: string;
+}
+/**
+ * The single navigation row used by every nav in the system. `DrawerNavItem`
+ * and `SubNavItem` are thin configurations of this component — they differ
+ * only in padding, icon size and type scale — so the states, colours, hover
+ * behaviour and badge handling live here exactly once. All colours resolve to
+ * theme tokens, so it adapts to light and dark.
+ */
+export declare const NavRow: React.FC<NavRowProps>;