@beydesign/storybook 0.2.6 → 0.2.8

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './stories/Typography';
 export * from './stories/Credits';
 export * from './stories/Navigation';
 export * from './stories/Drawer';
+export * from './stories/Settings';
 export * from './stories/Typography';
 export * from './stories/UI';
 export * from './stories/StripeProduct';

package/dist/index.js

@@ -8,6 +8,7 @@ export * from './stories/Typography';
 export * from './stories/Credits';
 export * from './stories/Navigation';
 export * from './stories/Drawer';
+export * from './stories/Settings';
 export * from './stories/Typography';
 export * from './stories/UI';
 export * from './stories/StripeProduct';

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { MobileNavBarProps } from './types';
+export declare const MobileNavBar: React.FC<MobileNavBarProps>;

package/dist/stories/Navigation/MobileNavBar.js

@@ -0,0 +1,43 @@
+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 { Logo } from '../UI';
+import { Drawer } from '../Drawer';
+import { getIconComponent } from '../../utils';
+const shadowXs = '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 NavIconButton = ({ icon, ariaLabel, onClick, }) => (_jsx(Box, { component: 'button', type: 'button', onClick: onClick, "aria-label": ariaLabel, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: '1px solid var(--color-border-border-component)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)', sx: {
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+        boxShadow: shadowXs,
+        '&:focus-visible': {
+            outline: '2px solid var(--color-border-border-component-active)',
+            outlineOffset: '2px',
+        },
+    }, children: getIconComponent(icon, {
+        width: '20px',
+        height: '20px',
+        color: 'var(--color-foreground-fg-secondary)',
+        'aria-hidden': 'true',
+    }) }));
+export const MobileNavBar = ({ onSearchClick, drawerProps, showSearch = true, logoProps, style, className, }) => {
+    const [open, setOpen] = useState(false);
+    const handleMenuClick = () => {
+        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 }) }))] }));
+};

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MobileNavBar } from './MobileNavBar';
+declare const meta: Meta<typeof MobileNavBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutDrawer: Story;
+export declare const MenuOnly: Story;

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

@@ -0,0 +1,75 @@
+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' },
+];
+const drawerProps = {
+    navItems,
+    activeKey: 'kb',
+    credits: { usedCredits: 500, maxCredits: 2000 },
+    profile: {
+        name: 'Emma Novak',
+        email: 'emma@example.com',
+    },
+};
+const meta = {
+    title: 'Design System/Components/Navigation/MobileNavBar',
+    component: MobileNavBar,
+    parameters: {
+        layout: 'fullscreen',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7079-12927',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        onSearchClick: {
+            description: 'Callback fired when the search button is clicked',
+            table: { type: { summary: 'function' } },
+        },
+        drawerProps: {
+            control: false,
+            description: 'Drawer config. When provided, the menu button opens the navigation drawer as an overlay.',
+            table: { type: { summary: 'DrawerProps' } },
+        },
+        showSearch: {
+            control: 'boolean',
+            description: 'Whether to show the search button',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        logoProps: {
+            control: 'object',
+            description: 'Logo customization props',
+            table: { type: { summary: 'object' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        showSearch: true,
+        drawerProps,
+    },
+};
+export const WithoutDrawer = {
+    args: {
+        showSearch: true,
+    },
+};
+export const MenuOnly = {
+    args: {
+        showSearch: false,
+        drawerProps,
+    },
+};

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

@@ -1,4 +1,5 @@
 export * from './Header';
+export * from './MobileNavBar';
 export * from './NavItem';
 export * from './Sidebar';
 export * from './types';

package/dist/stories/Navigation/index.js

@@ -1,4 +1,5 @@
 export * from './Header';
+export * from './MobileNavBar';
 export * from './NavItem';
 export * from './Sidebar';
 export * from './types';

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

@@ -2,6 +2,7 @@ import { SxProps, Theme } from '@mui/material';
 import { IconName } from '../../utils';
 import { AvatarProps } from '../UI';
 import { CreditsCardProps } from '../Credits';
+import { DrawerProps } from '../Drawer';
 /**
  * Header component props
  */
@@ -184,3 +185,27 @@ export interface ProcessHeaderProps {
     /** The class name to apply to the component */
     className?: string;
 }
+/**
+ * Mobile navigation bar props
+ */
+export interface MobileNavBarProps {
+    /** Callback fired when the search button is clicked */
+    onSearchClick?: () => void;
+    /**
+     * Drawer configuration. When provided, clicking the menu button slides the
+     * navigation drawer in as an overlay.
+     */
+    drawerProps?: DrawerProps;
+    /** Whether to show the search button */
+    showSearch?: boolean;
+    /** Logo customization props */
+    logoProps?: {
+        gradient?: string;
+        color?: string;
+        svgUrl?: string;
+    };
+    /** The style object to apply to the component */
+    style?: SxProps<Theme>;
+    /** The class name to apply to the component */
+    className?: string;
+}

package/dist/stories/Settings/SettingsNav.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SettingsNavProps } from './types';
+/**
+ * Secondary navigation for the Settings area: a "Settings" heading followed by
+ * titled sections of {@link SettingsNavItem} 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.
+ */
+export declare const SettingsNav: React.FC<SettingsNavProps>;

package/dist/stories/Settings/SettingsNav.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { SettingsNavItem } from './SettingsNavItem';
+import { DrawerNavItemState } from '../Drawer/types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+const WIDTH = '238px';
+const Shell = styled.aside `
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: ${WIDTH};
+  height: 100vh;
+  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 var(--color-border-border-component);
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  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);
+  }
+`;
+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 `
+  padding: 0 var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+`;
+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 DrawerNavItemState.Disabled;
+    const key = item.key ?? item.text;
+    if (activeKey !== undefined && key === activeKey) {
+        return DrawerNavItemState.Active;
+    }
+    return DrawerNavItemState.Inactive;
+};
+/**
+ * Secondary navigation for the Settings area: a "Settings" heading followed by
+ * titled sections of {@link SettingsNavItem} 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.
+ */
+export const SettingsNav = ({ title = 'Settings', sections, activeKey, className, style, testId, }) => {
+    const handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        if (item.link) {
+            window.location.href = item.link;
+        }
+        else {
+            item.onClick?.();
+        }
+    };
+    return (_jsx(Shell, { className: className, style: style, "data-testid": testId, children: _jsxs(Content, { children: [_jsx(Header, { children: _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(SettingsNavItem, { 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/Settings/SettingsNav.stories.d.ts

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

package/dist/stories/Settings/SettingsNav.stories.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SettingsNav } from './SettingsNav';
+const sections = [
+    {
+        key: 'business',
+        title: 'Your business',
+        items: [{ key: 'branding', text: 'Branding', icon: 'StarFour' }],
+    },
+    {
+        key: 'team',
+        title: 'Team',
+        items: [{ key: 'members', text: 'Members', icon: 'UsersThree' }],
+    },
+    {
+        key: 'billing',
+        title: 'Billing & plans',
+        items: [
+            {
+                key: 'subscription',
+                text: 'Subscription',
+                icon: 'CreditCard',
+            },
+            { key: 'invoices', text: 'Invoices', icon: 'FileText' },
+        ],
+    },
+    {
+        key: 'developers',
+        title: 'Developers',
+        items: [
+            { key: 'api-keys', text: 'API keys', icon: 'Key' },
+            { key: 'webhooks', text: 'Webhooks', icon: 'Graph' },
+        ],
+    },
+];
+const meta = {
+    title: 'Design System/Components/Settings/SettingsNav',
+    component: SettingsNav,
+    parameters: {
+        layout: 'fullscreen',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7005-34376',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: { control: 'text' },
+        activeKey: {
+            control: 'text',
+            description: 'Key (or text) of the currently active nav item',
+        },
+        sections: { control: false },
+    },
+    args: {
+        title: 'Settings',
+        activeKey: 'api-keys',
+        sections,
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '100vh', display: 'flex' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {};
+export const BrandingActive = {
+    args: { activeKey: 'branding' },
+};

package/dist/stories/Settings/SettingsNavItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SettingsNavItemProps } from './types';
+/**
+ * A single navigation row for the {@link SettingsNav}. Deliberately more compact
+ * than {@link DrawerNavItem} — 28px tall (4px vertical padding), a 16px icon and
+ * a Medium-weight label — to read as secondary navigation. All colours resolve
+ * to theme tokens, so it adapts to light and dark.
+ */
+export declare const SettingsNavItem: React.FC<SettingsNavItemProps>;

package/dist/stories/Settings/SettingsNavItem.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { DrawerNavItemState } from '../Drawer/types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Badge, BadgeColor, BadgeSize } from '../UI';
+import { getIconComponent } from '../../utils';
+const ACTIVE_FG = 'var(--color-text-text-clicable)';
+const INACTIVE_FG = 'var(--color-text-text-subtle)';
+const ACTIVE_BG = 'var(--color-background-bg-brand-transparent)';
+const HOVER_BG = 'var(--color-background-bg-brand-transparent-hover)';
+const foreground = (state) => state === DrawerNavItemState.Active || state === DrawerNavItemState.Hover
+    ? ACTIVE_FG
+    : INACTIVE_FG;
+const background = (state) => {
+    if (state === DrawerNavItemState.Active)
+        return ACTIVE_BG;
+    if (state === DrawerNavItemState.Hover)
+        return HOVER_BG;
+    return 'transparent';
+};
+const StyledNavItem = styled.button `
+  appearance: none;
+  font: inherit;
+  text-align: left;
+  border: none;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  width: 100%;
+  padding: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px)
+    var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  color: ${({ $state }) => foreground($state)};
+  background-color: ${({ $state }) => background($state)};
+  opacity: ${({ $state }) => $state === DrawerNavItemState.Disabled ? 0.5 : 1};
+  cursor: ${({ $state }) => $state === DrawerNavItemState.Disabled ? 'not-allowed' : 'pointer'};
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+
+  &:hover {
+    ${({ $state }) => $state === DrawerNavItemState.Inactive
+    ? `background-color: ${HOVER_BG}; color: ${ACTIVE_FG};`
+    : ''}
+  }
+`;
+const IconSlot = styled.span `
+  display: inline-flex;
+  flex-shrink: 0;
+  color: inherit;
+`;
+const Label = styled.span `
+  display: inline-flex;
+  flex: 1 1 0;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: inherit;
+`;
+/**
+ * A single navigation row for the {@link SettingsNav}. Deliberately more compact
+ * than {@link DrawerNavItem} — 28px tall (4px vertical padding), a 16px icon and
+ * a Medium-weight label — to read as secondary navigation. All colours resolve
+ * to theme tokens, so it adapts to light and dark.
+ */
+export const SettingsNavItem = ({ text, icon, state = DrawerNavItemState.Inactive, showBadge = false, badgeText = 'Coming Soon', onClick, className, style, testId, }) => {
+    const isDisabled = state === DrawerNavItemState.Disabled;
+    const handleClick = () => {
+        if (!isDisabled)
+            onClick?.();
+    };
+    return (_jsxs(StyledNavItem, { type: "button", "$state": state, className: className, style: style, onClick: handleClick, disabled: isDisabled, "aria-current": state === DrawerNavItemState.Active ? 'page' : undefined, "data-testid": testId, children: [_jsx(IconSlot, { children: getIconComponent(icon, { size: 16 }) }), _jsx(Label, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "inherit", children: text }) }), showBadge && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: badgeText, color: BadgeColor.Default }))] }));
+};

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * Renders the primary {@link Drawer} beside the {@link SettingsNav} exactly as
+ * they compose on a real settings page, with a placeholder content pane. Both
+ * navs are interactive.
+ */
+declare const SettingsPageExample: () => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof SettingsPageExample>;
+export default meta;
+type Story = StoryObj<typeof SettingsPageExample>;
+export declare const DrawerWithSettingsNav: Story;

package/dist/stories/Settings/SettingsPage.stories.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SettingsNav } from './SettingsNav';
+import { Drawer } from '../Drawer';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+const drawerNavItems = [
+    { 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' },
+];
+const settingsSections = [
+    {
+        key: 'business',
+        title: 'Your business',
+        items: [{ key: 'branding', text: 'Branding', icon: 'StarFour' }],
+    },
+    {
+        key: 'team',
+        title: 'Team',
+        items: [{ key: 'members', text: 'Members', icon: 'UsersThree' }],
+    },
+    {
+        key: 'billing',
+        title: 'Billing & plans',
+        items: [
+            { key: 'subscription', text: 'Subscription', icon: 'CreditCard' },
+            { key: 'invoices', text: 'Invoices', icon: 'FileText' },
+        ],
+    },
+    {
+        key: 'developers',
+        title: 'Developers',
+        items: [
+            { key: 'api-keys', text: 'API keys', icon: 'Key' },
+            { key: 'webhooks', text: 'Webhooks', icon: 'Graph' },
+        ],
+    },
+];
+const labels = {
+    branding: 'Branding',
+    members: 'Members',
+    subscription: 'Subscription',
+    invoices: 'Invoices',
+    'api-keys': 'API keys',
+    webhooks: 'Webhooks',
+};
+/**
+ * Renders the primary {@link Drawer} beside the {@link SettingsNav} exactly as
+ * they compose on a real settings page, with a placeholder content pane. Both
+ * navs are interactive.
+ */
+const SettingsPageExample = () => {
+    const [activeSetting, setActiveSetting] = useState('api-keys');
+    const sections = settingsSections.map((section) => ({
+        ...section,
+        items: section.items.map((item) => ({
+            ...item,
+            onClick: () => setActiveSetting(item.key ?? item.text),
+        })),
+    }));
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            height: '100vh',
+            backgroundColor: 'var(--color-background-bg-page)',
+        }, children: [_jsx(Drawer, { navItems: drawerNavItems, activeKey: "api", credits: { usedCredits: 500, maxCredits: 2000 }, profile: { name: 'Emma Novak', email: 'emma@example.com' } }), _jsx(SettingsNav, { sections: sections, activeKey: activeSetting }), _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: labels[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 \"", labels[activeSetting] ?? activeSetting, "\" settings page renders here."] }) })] })] }));
+};
+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;
+export const DrawerWithSettingsNav = {};

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

@@ -0,0 +1,3 @@
+export * from './SettingsNav';
+export * from './SettingsNavItem';
+export * from './types';

package/dist/stories/Settings/index.js

@@ -0,0 +1,3 @@
+export * from './SettingsNav';
+export * from './SettingsNavItem';
+export * from './types';

package/dist/stories/Settings/types.d.ts

@@ -0,0 +1,68 @@
+import type { CSSProperties } from 'react';
+import type { IconName } from '../../utils';
+import type { DrawerNavItemState } from '../Drawer/types';
+/**
+ * Props for the standalone {@link SettingsNavItem} row. Compared to
+ * {@link DrawerNavItem} this is a more compact secondary-nav row: 28px tall,
+ * 16px icon and Medium-weight label.
+ */
+export interface SettingsNavItemProps {
+    /** Label text. */
+    text: string;
+    /** Phosphor icon name rendered to the left of the label. */
+    icon: IconName;
+    /** Visual state of the item. */
+    state?: DrawerNavItemState;
+    /** 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;
+}
+/**
+ * A single navigation entry inside a {@link SettingsNavSection}.
+ */
+export interface SettingsNavItemConfig {
+    /** Stable identifier used to resolve the active item (falls back to `text`). */
+    key?: string;
+    text: string;
+    icon: IconName;
+    /** Force a state. When omitted it is derived from `activeKey` / `disabled`. */
+    state?: DrawerNavItemState;
+    disabled?: boolean;
+    showBadge?: boolean;
+    badgeText?: string;
+    /** When set, clicking navigates to this URL. */
+    link?: string;
+    onClick?: () => void;
+}
+/**
+ * A titled group of {@link SettingsNavItemConfig} rows
+ * (e.g. "Your business", "Billing & plans").
+ */
+export interface SettingsNavSection {
+    /** Stable key for the section (falls back to `title`). */
+    key?: string;
+    /** Uppercase caption rendered above the section's items. */
+    title?: string;
+    items: SettingsNavItemConfig[];
+}
+/**
+ * Props for the composed {@link SettingsNav} secondary navigation.
+ */
+export interface SettingsNavProps {
+    /** Heading rendered at the top. Defaults to "Settings". */
+    title?: string;
+    /** Grouped navigation entries. */
+    sections: SettingsNavSection[];
+    /** Key (or text) of the currently active item. */
+    activeKey?: string;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+}

package/dist/stories/Settings/types.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.2.6",
+  "version": "0.2.8",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",