@beydesign/storybook 0.0.1 → 0.0.2

package/dist/stories/Navigation/ComplexHeader.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LayoutType } from './types';
+import { Box } from '@mui/material';
+import { ButtonDisplayMode, ButtonSize, MainButton } from '../Buttons';
+import { ButtonHierarchy } from '../Buttons';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Badge, BadgeColor, BadgeSize } from '../UI';
+import { AutoComplete } from '../Form/AutoComplete';
+export const ComplexHeader = ({ title = 'Title', badgeText = '22', newButtonText = 'New', onNewClick, onOutputFileClick, onDownloadAllClick, onLayoutChange, className, sx, }) => {
+    const [layoutType, setLayoutType] = useState(LayoutType.Grid);
+    const handleLayoutChange = (type) => {
+        setLayoutType(type);
+        onLayoutChange?.(type);
+    };
+    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page-contrast)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', sx: sx, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Bold, children: title }), badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.md, color: BadgeColor.Violet }))] }), onNewClick && (_jsx(MainButton, { text: newButtonText, hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, showTrailingIcon: true, trailingIcon: 'Plus', onClick: onNewClick }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsx(AutoComplete, { options: [], placeholder: "Search", onChange: () => { }, value: '' }), _jsx(MainButton, { text: 'Output File', hierarchy: ButtonHierarchy.SecondaryColor, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onOutputFileClick }), _jsx(MainButton, { text: 'Download All', hierarchy: ButtonHierarchy.Primary, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onDownloadAllClick }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', children: [_jsx(MainButton, { hierarchy: layoutType === LayoutType.Grid
+                                    ? ButtonHierarchy.TertiaryColor
+                                    : ButtonHierarchy.Tertiary, size: ButtonSize.sm, displayIconMode: ButtonDisplayMode.Only, displayIcon: "GridFour", onClick: () => handleLayoutChange(LayoutType.Grid) }), _jsx(MainButton, { hierarchy: layoutType === LayoutType.List
+                                    ? ButtonHierarchy.TertiaryColor
+                                    : ButtonHierarchy.Tertiary, size: ButtonSize.sm, displayIconMode: ButtonDisplayMode.Only, displayIcon: "List", onClick: () => handleLayoutChange(LayoutType.List) })] })] })] }));
+};

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

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

package/dist/stories/Navigation/ComplexHeader.stories.js

@@ -0,0 +1,82 @@
+import styles from './Header.module.css';
+import { ComplexHeader } from './ComplexHeader';
+const meta = {
+    title: 'Design System/Components/Navigation/ComplexHeader',
+    component: ComplexHeader,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4781-5713&t=vdrrXyG9txidDmlc-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title of the header',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        badgeText: {
+            control: 'text',
+            description: 'Text of the badge',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        newButtonText: {
+            control: 'text',
+            description: 'Text of the new button',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onNewClick: {
+            description: 'Callback function to handle new button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        onOutputFileClick: {
+            description: 'Callback function to handle output file button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        onDownloadAllClick: {
+            description: 'Callback function to handle download all button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        onLayoutChange: {
+            description: 'Callback function to handle layout change',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        className: {
+            control: 'text',
+            description: 'Custom class name for the header',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: styles['responsive-width'] },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Beyond Presence',
+        badgeText: '22',
+        newButtonText: 'New Agent',
+        onNewClick: () => { },
+        onOutputFileClick: () => { },
+        onDownloadAllClick: () => { },
+        onLayoutChange: () => { },
+        className: styles['responsive-width'],
+    },
+};

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

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

package/dist/stories/Navigation/Header.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { MainButton } from '../Buttons';
+import { ButtonHierarchy, ButtonSize } from '../Buttons';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Avatar, AvatarSize } from '../UI';
+export const Header = ({ title = 'Beyond Presence', email, avatarProps, backButtonText = 'Back', onBackClick, onLogoutClick, className, }) => {
+    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page-contrast)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', children: [onBackClick ? (_jsx(MainButton, { text: backButtonText, hierarchy: ButtonHierarchy.Tertiary, showLeadingIcon: true, leadingIcon: 'ArrowLeft', onClick: onBackClick })) : (_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, children: title })), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px', children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, children: email }), _jsx(MainButton, { text: 'Log Out', size: ButtonSize.sm, hierarchy: ButtonHierarchy.Tertiary, onClick: onLogoutClick, style: { paddingInline: '0px', paddingBlock: '0.1rem' } })] }), _jsx(Avatar, { ...avatarProps, size: AvatarSize.md })] })] }));
+};

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

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

package/dist/stories/Navigation/Header.stories.js

@@ -0,0 +1,87 @@
+import { Header } from './Header';
+import { AvatarStyle } from '../UI';
+import styles from './Header.module.css';
+const meta = {
+    title: 'Design System/Components/Navigation/Header',
+    component: Header,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=5115-3325&t=DxHE3Y7uZLPwM9mQ-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title of the header',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        email: {
+            control: 'text',
+            description: 'Email of the logged in user',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        avatarProps: {
+            control: 'object',
+            description: 'Avatar props',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+        backButtonText: {
+            control: 'text',
+            description: 'Text of the back button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Back' },
+            },
+        },
+        onBackClick: {
+            description: 'Callback function to handle back button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        onLogoutClick: {
+            description: 'Callback function to handle logout button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        className: {
+            control: 'text',
+            description: 'Custom class name for the header',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: styles['responsive-width'] },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Beyond Presence',
+        email: 'john.doe@example.com',
+        avatarProps: {
+            avatarStyle: AvatarStyle.Placeholder,
+            text: 'John Doe',
+        },
+        backButtonText: 'Back',
+        onLogoutClick: () => { },
+        className: styles['responsive-width'],
+    },
+};
+export const WithBackButton = {
+    args: {
+        ...Default.args,
+        backButtonText: 'Back',
+        onBackClick: () => { },
+    },
+};

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

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

package/dist/stories/Navigation/NavItem.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { NavItemState, NavItemSize } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Badge, BadgeColor, BadgeSize } from '../UI';
+import { Box } from '@mui/material';
+import { getIconComponent } from '../../utils';
+const StyledNavItem = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '8px 28px' : '8px 60px 8px 28px'};
+  border-radius: 8px;
+  cursor: ${({ $state }) => $state === NavItemState.Disabled ? 'not-allowed' : 'pointer'};
+  opacity: ${({ $state }) => ($state === NavItemState.Disabled ? 0.5 : 1)};
+  transition: padding 0.3s ease-in-out;
+  justify-content: ${({ $size }) => $size === NavItemSize.Collapsed ? 'center' : 'flex-start'};
+
+  &:hover {
+    .nav-item-icon {
+      color: ${({ $state }) => $state === NavItemState.Disabled
+    ? 'var(--color-text-text-subtle)'
+    : 'var(--color-background-bg-brand-primary-hover)'} !important;
+    }
+
+    .nav-item-text {
+      color: ${({ $state }) => $state === NavItemState.Disabled
+    ? 'var(--color-text-text-subtle)'
+    : 'var(--color-background-bg-brand-primary-hover)'} !important;
+    }
+  }
+`;
+// Custom styled span to handle icon color changes
+const IconWrapper = styled.span `
+  display: inline-flex;
+  color: ${({ $state }) => $state === NavItemState.Active
+    ? 'var(--color-background-bg-brand-primary)'
+    : 'var(--color-text-text-paragraph)'};
+  transition: color 0.3s ease-in-out;
+`;
+const TextWrapper = styled.span `
+  display: inline-block;
+  white-space: nowrap;
+`;
+export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavItemSize.Expanded, showBadge = false, onClick, className, }) => {
+    const handleClick = () => {
+        if (state !== NavItemState.Disabled && onClick) {
+            onClick();
+        }
+    };
+    const isCollapsed = size === NavItemSize.Collapsed;
+    return (_jsxs(StyledNavItem, { "$state": state, "$size": size, onClick: handleClick, className: className, title: isCollapsed ? text : undefined, children: [_jsx("svg", { width: "5", height: "36", viewBox: "0 0 5 36", fill: state === NavItemState.Active
+                    ? 'var(--color-background-bg-brand-primary)'
+                    : 'transparent', xmlns: "http://www.w3.org/2000/svg", style: {
+                    transition: 'fill 0.3s ease-in-out',
+                    position: 'absolute',
+                    left: '0',
+                }, children: _jsx("path", { d: "M0 0C2.76142 0 5 2.23858 5 5V31C5 33.7614 2.76142 36 0 36V0Z" }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "8px", sx: { transition: 'gap 0.3s ease-in-out' }, children: [_jsx(IconWrapper, { className: "nav-item-icon", "$state": state, children: getIconComponent(icon, {
+                            size: 20,
+                        }) }), !isCollapsed && (_jsx(TextWrapper, { className: "nav-item-text", children: _jsx(Typography, { size: TypographySize.TextS, weight: state === NavItemState.Active
+                                ? TypographyWeight.SemiBold
+                                : TypographyWeight.Medium, className: "nav-item-text", color: state === NavItemState.Active
+                                ? 'var(--color-background-bg-brand-primary)'
+                                : 'var(--color-text-text-paragraph)', children: text }) })), showBadge && !isCollapsed && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: "Coming Soon", color: BadgeColor.Default }))] })] }));
+};

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NavItem } from './NavItem';
+declare const meta: Meta<typeof NavItem>;
+export default meta;
+type Story = StoryObj<typeof NavItem>;
+export declare const Default: Story;
+export declare const Active: Story;
+export declare const Disabled: Story;
+export declare const Expanded: Story;
+export declare const Collapsed: Story;
+export declare const WithComingSoonBadge: Story;
+export declare const SidebarExpanded: Story;
+export declare const SidebarCollapsed: Story;
+export declare const DifferentIcons: Story;

package/dist/stories/Navigation/NavItem.stories.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavItem } from './NavItem';
+import { NavItemState, NavItemSize } from './types';
+const meta = {
+    title: 'Design System/Components/Navigation/NavItem',
+    component: NavItem,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        text: { control: 'text' },
+        icon: { control: 'text' },
+        state: {
+            control: 'select',
+            options: Object.values(NavItemState),
+        },
+        size: {
+            control: 'select',
+            options: Object.values(NavItemSize),
+        },
+        showBadge: { control: 'boolean' },
+        onClick: { action: 'clicked' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        text: 'Navigation Item',
+        icon: 'House',
+        state: NavItemState.Default,
+        size: NavItemSize.Expanded,
+        showBadge: false,
+    },
+};
+export const Active = {
+    args: {
+        text: 'Active Item',
+        icon: 'House',
+        state: NavItemState.Active,
+        size: NavItemSize.Expanded,
+        showBadge: false,
+    },
+};
+export const Disabled = {
+    args: {
+        text: 'Disabled Item',
+        icon: 'House',
+        state: NavItemState.Disabled,
+        size: NavItemSize.Expanded,
+        showBadge: false,
+    },
+};
+export const Expanded = {
+    args: {
+        text: 'Expanded Item',
+        icon: 'House',
+        size: NavItemSize.Expanded,
+        showBadge: false,
+    },
+};
+export const Collapsed = {
+    args: {
+        text: 'Collapsed Item',
+        icon: 'House',
+        size: NavItemSize.Collapsed,
+        showBadge: false,
+    },
+};
+export const WithComingSoonBadge = {
+    args: {
+        text: 'New Feature',
+        icon: 'Sparkle',
+        showBadge: true,
+    },
+};
+export const SidebarExpanded = {
+    render: () => (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            padding: '16px',
+            backgroundColor: 'var(--color-background-bg-white)',
+            borderRadius: '8px',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+        }, children: [_jsx(NavItem, { text: "Home", icon: "House", size: NavItemSize.Expanded, state: NavItemState.Active }), _jsx(NavItem, { text: "Settings", icon: "Gear", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Notifications", icon: "Bell", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Messages", icon: "ChatText", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Profile", icon: "User", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Analytics", icon: "ChartBar", size: NavItemSize.Expanded, showBadge: true, state: NavItemState.Disabled })] })),
+};
+export const SidebarCollapsed = {
+    render: () => (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '8px',
+            backgroundColor: 'var(--color-background-bg-white)',
+            borderRadius: '8px',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+        }, children: [_jsx(NavItem, { text: "Home", icon: "House", size: NavItemSize.Collapsed, state: NavItemState.Active }), _jsx(NavItem, { text: "Settings", icon: "Gear", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Notifications", icon: "Bell", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Messages", icon: "ChatText", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Profile", icon: "User", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Analytics", icon: "ChartBar", state: NavItemState.Disabled, size: NavItemSize.Collapsed })] })),
+};
+export const DifferentIcons = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' }, children: [_jsx(NavItem, { text: "Home", icon: "House" }), _jsx(NavItem, { text: "Settings", icon: "Gear" }), _jsx(NavItem, { text: "Notifications", icon: "Bell" }), _jsx(NavItem, { text: "Messages", icon: "ChatText" }), _jsx(NavItem, { text: "Profile", icon: "User" }), _jsx(NavItem, { text: "Analytics", icon: "ChartBar", showBadge: true })] })),
+};

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

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

package/dist/stories/Navigation/ProcessHeader.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Badge, BadgeColor, BadgeSize } from '../UI';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { ButtonHierarchy, ButtonSize, MainButton } from '../Buttons';
+export const ProcessHeader = ({ title, currentStep, subtitle, totalSteps, headerRightText, onCancelClick, sx, className, }) => {
+    const stepChecks = () => {
+        return (currentStep && totalSteps && currentStep >= 1 && currentStep <= totalSteps);
+    };
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: sx, className: className, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [headerRightText && (_jsx(Badge, { text: headerRightText, size: BadgeSize.lg, color: BadgeColor.Green })), stepChecks() && (_jsx(Badge, { text: `Step ${currentStep} of ${totalSteps}`, size: BadgeSize.lg, color: BadgeColor.Violet }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [title && (_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.SemiBold, children: `${title}.` })), subtitle && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: subtitle }))] })] }), onCancelClick && (_jsx(MainButton, { text: 'Cancel Process', onClick: onCancelClick, size: ButtonSize.md, hierarchy: ButtonHierarchy.TertiaryColor, trailingIcon: 'X', showTrailingIcon: true }))] }));
+};

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

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

package/dist/stories/Navigation/ProcessHeader.stories.js

@@ -0,0 +1,76 @@
+import { ProcessHeader } from './ProcessHeader';
+import styles from './Header.module.css';
+const meta = {
+    title: 'Design System/Components/Navigation/ProcessHeader',
+    component: ProcessHeader,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/Ze4bBHgBQYinBDZr1COHuk/Agents?node-id=1928-68769&t=ff7acatvxaY98hGj-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title of the header',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        subtitle: {
+            control: 'text',
+            description: 'Subtitle of the header',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        currentStep: {
+            control: 'number',
+            description: 'Current step of the process',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        totalSteps: {
+            control: 'number',
+            description: 'Total steps of the process',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        headerRightText: {
+            control: 'text',
+            description: 'Text to display in the header right',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onCancelClick: {
+            description: 'Callback to handle the cancel button click',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        sx: {
+            control: 'object',
+            description: 'Style object to apply to the component',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Train Agent',
+        subtitle: 'Please fill in the necessary information for your agent & upload knowledge files.',
+        currentStep: 3,
+        totalSteps: 3,
+        headerRightText: 'New Agent',
+        onCancelClick: () => { },
+        className: styles['responsive-width'],
+    },
+};

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

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

package/dist/stories/Navigation/Sidebar.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import { Box } from '@mui/material';
+import { NavItem } from './NavItem';
+import { Logo, LogoVariant } from '../UI';
+import { CreditsCard, CreditsCardSize, CreditsCardSkeleton } from '../Credits';
+import { SidebarSize, NavItemSize, NavItemState, } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonShape, ButtonSize, } from '../Buttons';
+const StyledSidebar = styled.div `
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-background-bg-component);
+  border-right: 1px solid var(--color-border-border-component);
+  height: 100vh;
+  width: ${({ $size }) => ($size === SidebarSize.Expanded ? '280px' : '80px')};
+  transition: width 0.3s ease-in-out;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: relative;
+  padding: 16px 0px 24px 0px;
+`;
+const SidebarContainer = styled.div `
+  position: relative;
+  height: 100%;
+  background: linear-gradient(180deg, #ffffff 77.85%, #f4edff 115.17%);
+`;
+const LogoContainer = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: ${({ $size }) => $size === SidebarSize.Expanded ? 'left' : 'center'};
+  margin-bottom: 32px;
+  min-height: 38px;
+  height: 38px;
+  transition: all 0.3s ease-in-out;
+  padding: ${({ $size }) => $size === SidebarSize.Expanded ? '0px 28px' : '0px'};
+`;
+const ToggleButtonWrapper = styled.div `
+  position: absolute;
+  top: 1.5rem;
+  right: -1rem;
+  z-index: 99;
+  pointer-events: auto;
+  visibility: visible;
+  filter: drop-shadow(0px 2px 4px rgba(29, 20, 40, 0.08));
+  contain: layout;
+  transition: transform 0.3s ease-in-out;
+`;
+const NavItemsContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+const NavSection = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  transition: all 0.3s ease-in-out;
+`;
+const SectionTitle = styled.div `
+  color: var(--color-text-text-subtle);
+  padding: ${({ $size }) => $size === SidebarSize.Expanded ? '0px 28px' : '0px'};
+  display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'flex' : 'block'};
+  opacity: ${({ $size }) => ($size === SidebarSize.Collapsed ? 0 : 0.5)};
+  justify-content: ${({ $size }) => $size === SidebarSize.Collapsed ? 'center' : 'flex-start'};
+  transition: all 0.3s ease-in-out;
+`;
+const Separator = styled.div `
+  height: 1px;
+  background-color: var(--color-border-border-divider);
+  padding: ${({ $size }) => $size === SidebarSize.Collapsed ? '0px 8px' : '0px 28px'};
+  margin: ${({ $size }) => $size === SidebarSize.Collapsed ? '16px 12px' : '16px 18px'};
+  transition: all 0.3s ease-in-out;
+`;
+const BottomContainer = styled.div `
+  margin-top: 16px;
+  transition: all 0.3s ease-in-out;
+`;
+// Wrapper component to handle links
+const NavItemWrapper = ({ item, isCollapsed, }) => {
+    const handleClick = () => {
+        if (item.link) {
+            window.location.href = item.link;
+        }
+        else if (item.onClick) {
+            item.onClick();
+        }
+    };
+    return (_jsx(NavItem, { text: item.text, icon: item.icon, state: item.state || NavItemState.Default, size: isCollapsed ? NavItemSize.Collapsed : NavItemSize.Expanded, showBadge: isCollapsed ? false : item.showBadge, onClick: handleClick }));
+};
+export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, loadingCredits = false, onToggle, logoProps = { color: 'var(--color-foreground-fg-brand-logo)' }, }) => {
+    const [sidebarSize, setSidebarSize] = useState(size);
+    const handleToggle = () => {
+        const newSize = sidebarSize === SidebarSize.Expanded
+            ? SidebarSize.Collapsed
+            : SidebarSize.Expanded;
+        setSidebarSize(newSize);
+        if (onToggle) {
+            onToggle(newSize);
+        }
+    };
+    const isCollapsed = sidebarSize === SidebarSize.Collapsed;
+    const cardSize = isCollapsed
+        ? CreditsCardSize.Collapsed
+        : CreditsCardSize.Expanded;
+    return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-paragraph)", className: isCollapsed ? 'hidden' : '', children: isCollapsed
+                                                    ? section.title.split(' ')[0]
+                                                    : section.title }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
+                                    section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [_jsx(Box, { display: 'flex', justifyContent: 'center', padding: isCollapsed ? '8px' : '0px 12px', children: loadingCredits ? (_jsx(CreditsCardSkeleton, { size: cardSize })) : credits ? (_jsx(CreditsCard, { size: cardSize, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, managedAgentsInfoText: credits.managedAgentsInfoText, speechToVideoInfoText: credits.speechToVideoInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits })) : null }), bottomNavItems.map((item, index) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `bottom-${item.text}-${index}`)))] }) })] }), _jsx(ToggleButtonWrapper, { children: isCollapsed ? (_jsx(MainButton, { text: "Expand", size: ButtonSize.xxs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretRight", onClick: handleToggle, shape: ButtonShape.Circle, hierarchy: ButtonHierarchy.Tertiary, style: {
+                        boxShadow: '2px 4px 8px 0px #1D142814',
+                    } })) : (_jsx(MainButton, { size: ButtonSize.xxs, text: "Collapse", hierarchy: ButtonHierarchy.Tertiary, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretLeft", onClick: handleToggle, style: {
+                        boxShadow: '2px 4px 8px 0px #1D142814',
+                    }, shape: ButtonShape.Circle })) })] }));
+};

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Sidebar } from './Sidebar';
+declare const meta: Meta<typeof Sidebar>;
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+export declare const InBoxContainer: Story;
+export declare const Expanded: Story;
+export declare const Collapsed: Story;
+export declare const LoadingCredits: Story;
+export declare const LoadingCreditsCollapsed: Story;
+export declare const WithoutCredits: Story;