@beydesign/storybook 0.2.30 → 0.3.0

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { NavItemState } from './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 === NavItemState.Active || state === NavItemState.Hover
+    ? ACTIVE_FG
+    : INACTIVE_FG;
+const background = (state) => {
+    if (state === NavItemState.Active)
+        return ACTIVE_BG;
+    if (state === NavItemState.Hover)
+        return HOVER_BG;
+    return 'transparent';
+};
+const StyledNavRow = styled.button `
+  appearance: none;
+  font: inherit;
+  text-align: left;
+  border: none;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  width: ${({ $collapsed }) => ($collapsed ? '36px' : '100%')};
+  height: ${({ $collapsed }) => ($collapsed ? '36px' : 'auto')};
+  align-self: ${({ $collapsed }) => ($collapsed ? 'center' : 'stretch')};
+  padding: ${({ $collapsed, $padding }) => ($collapsed ? '0' : $padding)};
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
+  color: ${({ $state }) => foreground($state)};
+  background-color: ${({ $state }) => background($state)};
+  opacity: ${({ $state }) => ($state === NavItemState.Disabled ? 0.5 : 1)};
+  cursor: ${({ $state }) => $state === NavItemState.Disabled ? 'not-allowed' : 'pointer'};
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out,
+    padding 0.3s ease-in-out;
+
+  &:hover {
+    ${({ $state }) => $state === NavItemState.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;
+`;
+/**
+ * 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 const NavRow = ({ text, icon, state = NavItemState.Inactive, collapsed = false, iconSize = 20, typographySize = TypographySize.TextS, typographyWeight = TypographyWeight.SemiBold, padding = 'var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)', showBadge = false, badgeText = 'Coming Soon', trailing, onClick, className, style, testId, }) => {
+    const isDisabled = state === NavItemState.Disabled;
+    const handleClick = () => {
+        if (!isDisabled)
+            onClick?.();
+    };
+    return (_jsxs(StyledNavRow, { type: "button", "$state": state, "$collapsed": collapsed, "$padding": padding, className: className, style: style, onClick: handleClick, disabled: isDisabled, title: collapsed ? text : undefined, "aria-current": state === NavItemState.Active ? 'page' : undefined, "data-testid": testId, children: [_jsx(IconSlot, { children: getIconComponent(icon, { size: iconSize }) }), !collapsed && (_jsxs(_Fragment, { children: [_jsx(Label, { children: _jsx(Typography, { size: typographySize, weight: typographyWeight, color: "inherit", children: text }) }), showBadge && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: badgeText, color: BadgeColor.Default })), trailing] }))] }));
+};

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

@@ -0,0 +1,11 @@
+/**
+ * Internal shared navigation primitives.
+ *
+ * This folder is deliberately NOT re-exported from `Navigation/index.ts` — it is
+ * the private foundation `Drawer`, `SubNav` and `MobileNav` are built on.
+ * Anything consumers need reaches them through those barrels under its public
+ * name (e.g. `NavItemState` ships as `DrawerNavItemState`).
+ */
+export * from './NavPanel';
+export * from './NavRow';
+export * from './types';

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

@@ -0,0 +1,11 @@
+/**
+ * Internal shared navigation primitives.
+ *
+ * This folder is deliberately NOT re-exported from `Navigation/index.ts` — it is
+ * the private foundation `Drawer`, `SubNav` and `MobileNav` are built on.
+ * Anything consumers need reaches them through those barrels under its public
+ * name (e.g. `NavItemState` ships as `DrawerNavItemState`).
+ */
+export * from './NavPanel';
+export * from './NavRow';
+export * from './types';

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

@@ -0,0 +1,71 @@
+import type { IconName } from '../../../utils';
+/**
+ * Expanded / collapsed size shared across every navigation panel and its
+ * sub-components.
+ */
+export declare enum NavPanelSize {
+    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 NavItemState {
+    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 NavItemHierarchy {
+    First = "First",
+    Secondary = "Secondary"
+}
+/**
+ * A single navigation entry inside a {@link SubNavSection}.
+ */
+export interface SubNavItemConfig {
+    /** 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?: NavItemState;
+    disabled?: boolean;
+    showBadge?: boolean;
+    badgeText?: string;
+    /** When set, clicking navigates to this URL. */
+    link?: string;
+    onClick?: () => void;
+}
+/**
+ * A titled group of {@link SubNavItemConfig} rows
+ * (e.g. "Your business", "Billing & plans").
+ */
+export interface SubNavSection {
+    /** Stable key for the section (falls back to `title`). */
+    key?: string;
+    /** Uppercase caption rendered above the section's items. */
+    title?: string;
+    items: SubNavItemConfig[];
+}
+/**
+ * A secondary navigation that a top-level nav item can drill into.
+ *
+ * On desktop this is rendered as its own panel beside the primary nav (see
+ * `SubNav`). On mobile there is no room for two panels, so the same
+ * config is pushed as a second pane inside the single overlay — see `MobileNav`.
+ */
+export interface SubNavConfig {
+    /** Heading rendered at the top of the pane. */
+    title?: string;
+    /** Grouped navigation entries. */
+    sections: SubNavSection[];
+    /** Key (or text) of the currently active item. */
+    activeKey?: string;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Expanded / collapsed size shared across every navigation panel and its
+ * sub-components.
+ */
+export var NavPanelSize;
+(function (NavPanelSize) {
+    NavPanelSize["Expanded"] = "Expanded";
+    NavPanelSize["Collapsed"] = "Collapsed";
+})(NavPanelSize || (NavPanelSize = {}));
+/**
+ * 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 var NavItemState;
+(function (NavItemState) {
+    NavItemState["Active"] = "Active";
+    NavItemState["Inactive"] = "Inactive";
+    NavItemState["Hover"] = "Hover";
+    NavItemState["Disabled"] = "Disabled";
+})(NavItemState || (NavItemState = {}));
+/**
+ * Hierarchy of a navigation item. `First` is a top-level entry (36px row),
+ * `Secondary` is a nested sub-item (28px row, lighter weight).
+ */
+export var NavItemHierarchy;
+(function (NavItemHierarchy) {
+    NavItemHierarchy["First"] = "First";
+    NavItemHierarchy["Secondary"] = "Secondary";
+})(NavItemHierarchy || (NavItemHierarchy = {}));

package/dist/stories/Navigation/navigation.fixtures.d.ts

@@ -0,0 +1,22 @@
+import type { DrawerNavItemConfig } from './Drawer';
+import type { SubNavSection } from './SubNav';
+/**
+ * Sample navigation config shared by the navigation stories.
+ *
+ * The point of this file is the point of the whole design: ONE config drives
+ * both layouts. On desktop `settingsSections` renders as a `SubNav` panel
+ * beside the `Drawer`; on mobile the very same array rides along on the
+ * Settings item's `subNav` and becomes the second pane of `MobileNav`.
+ */
+export declare const settingsSections: SubNavSection[];
+export declare const drawerNavItems: DrawerNavItemConfig[];
+export declare const credits: {
+    usedCredits: number;
+    maxCredits: number;
+};
+export declare const profile: {
+    name: string;
+    email: string;
+};
+/** Display names for the settings keys, for the example page's content area. */
+export declare const settingsLabels: Record<string, string>;

package/dist/stories/Navigation/navigation.fixtures.js

@@ -0,0 +1,64 @@
+/**
+ * Sample navigation config shared by the navigation stories.
+ *
+ * The point of this file is the point of the whole design: ONE config drives
+ * both layouts. On desktop `settingsSections` renders as a `SubNav` panel
+ * beside the `Drawer`; on mobile the very same array rides along on the
+ * Settings item's `subNav` and becomes the second pane of `MobileNav`.
+ */
+export 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' },
+        ],
+    },
+];
+export 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' },
+    {
+        key: 'settings',
+        text: 'Settings',
+        icon: 'GearSix',
+        subNav: { title: 'Settings', sections: settingsSections },
+    },
+];
+export const credits = { usedCredits: 500, maxCredits: 2000 };
+export const profile = { name: 'Emma Novak', email: 'emma@example.com' };
+/** Display names for the settings keys, for the example page's content area. */
+export const settingsLabels = {
+    branding: 'Branding',
+    members: 'Members',
+    subscription: 'Subscription',
+    invoices: 'Invoices',
+    'api-keys': 'API keys',
+    webhooks: 'Webhooks',
+};

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

@@ -1,8 +1,9 @@
+import { CSSProperties } from 'react';
 import { SxProps, Theme } from '@mui/material';
 import { IconName } from '../../utils';
 import { AvatarProps } from '../UI';
 import { CreditsCardProps } from '../Credits';
-import { DrawerProps } from '../Drawer';
+import { DrawerBodyProps, DrawerProps } from './Drawer';
 /**
  * Header component props
  */
@@ -185,6 +186,28 @@ export interface ProcessHeaderProps {
     /** The class name to apply to the component */
     className?: string;
 }
+/**
+ * Props for the {@link MobileNav} overlay — the single navigation panel used
+ * below the mobile breakpoint, which holds the `Drawer` and any `subNav` as
+ * pushable panes.
+ */
+export interface MobileNavProps extends Omit<DrawerBodyProps, 'size' | 'onSubNavOpen'> {
+    /** Whether the overlay is open. */
+    open: boolean;
+    /**
+     * Fired with the next open value — when the scrim is clicked, Esc is pressed,
+     * or the user navigates from a nav item.
+     */
+    onOpenChange: (open: boolean) => void;
+    /** Panel width. Defaults to `315px`, matching the mobile design. */
+    width?: string;
+    /** The class name to apply to the component */
+    className?: string;
+    /** The style object to apply to the sliding panel */
+    style?: CSSProperties;
+    /** Renders as `data-testid` for testing. */
+    testId?: string;
+}
 /**
  * Mobile navigation bar props
  */

package/package.json

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

package/dist/stories/Drawer/Drawer.js

@@ -1,163 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import styled from '@emotion/styled';
-import { DrawerSize, DrawerNavItemState, DrawerNavItemHierarchy, } from './types';
-import { DrawerNavItem } from './DrawerNavItem';
-import { DrawerCreditsCard } from './DrawerCreditsCard';
-import { DrawerCreditsCardSkeleton } from './DrawerCreditsCardSkeleton';
-import { DrawerProfile } from './DrawerProfile';
-import { DrawerProfileSkeleton } from './DrawerProfileSkeleton';
-import { Logo, LogoVariant } from '../UI';
-import { getIconComponent } from '../../utils';
-const EXPANDED_WIDTH = '238px';
-const COLLAPSED_WIDTH = '68px';
-/** Composed from the semantic `shadow-sm` design token. */
-const SHADOW_SM = 'var(--global-shadows-shadow-sm-offset-x) var(--global-shadows-shadow-sm-offset-y) var(--global-shadows-shadow-sm-blur) var(--global-shadows-shadow-sm-spread) var(--global-shadows-shadow-sm-color)';
-/**
- * Non-clipping outer shell. The toggle lives here (a sibling of the scroll
- * area) so it can overhang the right edge without being clipped by the panel's
- * `overflow`.
- */
-const Shell = styled.aside `
-  position: relative;
-  flex-shrink: 0;
-  height: 100vh;
-  width: ${({ $collapsed }) => ($collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH)};
-  transition: width 0.3s ease-in-out;
-`;
-const Scroll = styled.div `
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 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 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);
-  }
-`;
-const LogoHeader = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
-  height: 38px;
-  min-height: 38px;
-  margin-bottom: 40px;
-`;
-const Nav = styled.nav `
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  justify-content: space-between;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
-`;
-const NavTop = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-lg, 12px);
-`;
-const Footer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-2xl, 24px);
-`;
-const FooterSlot = styled.div `
-  display: flex;
-  justify-content: center;
-`;
-const ToggleButton = styled.button `
-  appearance: none;
-  position: absolute;
-  top: 52px;
-  right: -16px;
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: 1px solid var(--color-border-border-subtle);
-  border-radius: var(--spacing-tokens-size-in-px-radius-radius-full);
-  background-color: var(--color-background-bg-element);
-  color: var(--color-text-text-paragraph);
-  cursor: pointer;
-  box-shadow: ${SHADOW_SM};
-  transition: color 0.2s ease-in-out;
-
-  &:hover {
-    color: var(--color-text-text-clicable);
-  }
-`;
-/** Rotates the chevron smoothly between expanded (◀) and collapsed (▶). */
-const ToggleIcon = styled.span `
-  display: inline-flex;
-  transform: rotate(${({ $collapsed }) => ($collapsed ? '180deg' : '0deg')});
-  transition: transform 0.3s ease-in-out;
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-`;
-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;
-};
-/**
- * Composed application sidebar ("Drawer"): logo header, navigation list,
- * credits card and user-profile footer, with a floating collapse/expand
- * toggle. Collapse state can be controlled (`collapsed` + `onToggle`) or left
- * uncontrolled (`defaultCollapsed`). Every colour, space and radius resolves to
- * `@beydesign/tokens` CSS variables, so it renders correctly in light and dark.
- */
-export const Drawer = ({ navItems, activeKey, collapsed, defaultCollapsed = false, onToggle, showToggle = true, credits, creditsLoading = false, profile, profileLoading = false, logo, className, style, testId, }) => {
-    const isControlled = collapsed !== undefined;
-    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
-    const isCollapsed = isControlled ? collapsed : internalCollapsed;
-    const drawerSize = isCollapsed ? DrawerSize.Collapsed : DrawerSize.Expanded;
-    const handleToggle = () => {
-        const next = !isCollapsed;
-        if (!isControlled)
-            setInternalCollapsed(next);
-        onToggle?.(next);
-    };
-    const handleItemClick = (item) => {
-        if (item.disabled)
-            return;
-        if (item.link) {
-            window.location.href = item.link;
-        }
-        else {
-            item.onClick?.();
-        }
-    };
-    return (_jsxs(Shell, { "$collapsed": isCollapsed, className: className, style: style, "data-testid": testId, children: [_jsxs(Scroll, { children: [_jsx(LogoHeader, { "$collapsed": isCollapsed, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logo?.color ?? 'var(--color-foreground-fg-brand-logo)', gradient: logo?.gradient, svgUrl: logo?.svgUrl }) }), _jsxs(Nav, { children: [_jsx(NavTop, { children: navItems.map((item) => (_jsx(DrawerNavItem, { text: item.text, icon: item.icon, state: resolveState(item, activeKey), size: drawerSize, hierarchy: item.hierarchy ?? DrawerNavItemHierarchy.First, showBadge: item.showBadge, badgeText: item.badgeText, onClick: () => handleItemClick(item) }, item.key ?? item.text))) }), (credits || creditsLoading || profile || profileLoading) && (_jsxs(Footer, { children: [(credits || creditsLoading) && (_jsx(FooterSlot, { "$collapsed": isCollapsed, children: creditsLoading ? (_jsx(DrawerCreditsCardSkeleton, { size: drawerSize })) : (_jsx(DrawerCreditsCard, { ...credits, size: drawerSize })) })), (profile || profileLoading) && (_jsx(FooterSlot, { "$collapsed": isCollapsed, children: profileLoading ? (_jsx(DrawerProfileSkeleton, { size: drawerSize })) : (profile && _jsx(DrawerProfile, { ...profile, size: drawerSize })) }))] }))] })] }), showToggle && (_jsx(ToggleButton, { type: "button", onClick: handleToggle, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: _jsx(ToggleIcon, { "$collapsed": isCollapsed, children: getIconComponent('CaretLeft', { size: 16, weight: 'bold' }) }) }))] }));
-};

package/dist/stories/Drawer/DrawerNavItem.js

@@ -1,87 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from '@emotion/styled';
-import { DrawerNavItemState, DrawerNavItemHierarchy, DrawerSize, } from './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;
-  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
-  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
-  width: ${({ $collapsed }) => ($collapsed ? '36px' : '100%')};
-  height: ${({ $collapsed }) => ($collapsed ? '36px' : 'auto')};
-  align-self: ${({ $collapsed }) => ($collapsed ? 'center' : 'stretch')};
-  padding: ${({ $collapsed, $hierarchy }) => {
-    if ($collapsed)
-        return '0';
-    return $hierarchy === DrawerNavItemHierarchy.Secondary
-        ? 'var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px) var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px)'
-        : '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,
-    padding 0.3s 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 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.
- */
-export const DrawerNavItem = ({ text, icon, state = DrawerNavItemState.Inactive, size = DrawerSize.Expanded, hierarchy = DrawerNavItemHierarchy.First, showBadge = false, badgeText = 'Coming Soon', onClick, className, style, testId, }) => {
-    const isCollapsed = size === DrawerSize.Collapsed;
-    const isDisabled = state === DrawerNavItemState.Disabled;
-    const isSecondary = hierarchy === DrawerNavItemHierarchy.Secondary;
-    const handleClick = () => {
-        if (!isDisabled)
-            onClick?.();
-    };
-    return (_jsxs(StyledNavItem, { type: "button", "$state": state, "$collapsed": isCollapsed, "$hierarchy": hierarchy, className: className, style: style, onClick: handleClick, disabled: isDisabled, title: isCollapsed ? text : undefined, "data-testid": testId, children: [_jsx(IconSlot, { children: getIconComponent(icon, { size: 20 }) }), !isCollapsed && (_jsxs(_Fragment, { children: [_jsx(Label, { children: _jsx(Typography, { size: isSecondary ? TypographySize.TextXS : TypographySize.TextS, weight: isSecondary
-                                ? TypographyWeight.Medium
-                                : TypographyWeight.SemiBold, color: "inherit", children: text }) }), showBadge && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: badgeText, color: BadgeColor.Default }))] }))] }));
-};

package/dist/stories/Drawer/types.js

@@ -1,29 +0,0 @@
-/**
- * Expanded / collapsed size shared across the Drawer and its sub-components.
- */
-export var DrawerSize;
-(function (DrawerSize) {
-    DrawerSize["Expanded"] = "Expanded";
-    DrawerSize["Collapsed"] = "Collapsed";
-})(DrawerSize || (DrawerSize = {}));
-/**
- * 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 var DrawerNavItemState;
-(function (DrawerNavItemState) {
-    DrawerNavItemState["Active"] = "Active";
-    DrawerNavItemState["Inactive"] = "Inactive";
-    DrawerNavItemState["Hover"] = "Hover";
-    DrawerNavItemState["Disabled"] = "Disabled";
-})(DrawerNavItemState || (DrawerNavItemState = {}));
-/**
- * Hierarchy of a navigation item. `First` is a top-level entry (36px row),
- * `Secondary` is a nested sub-item (28px row, lighter weight).
- */
-export var DrawerNavItemHierarchy;
-(function (DrawerNavItemHierarchy) {
-    DrawerNavItemHierarchy["First"] = "First";
-    DrawerNavItemHierarchy["Secondary"] = "Secondary";
-})(DrawerNavItemHierarchy || (DrawerNavItemHierarchy = {}));

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

@@ -1,10 +0,0 @@
-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>;